Standardize admin page

build/webpack.common.js

@@ -4,6 +4,7 @@ var webpack = require("webpack");
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 const SymlinkWebpackPlugin = require('symlink-webpack-plugin');
+const { VueLoaderPlugin } = require('vue-loader')
 
 module.exports = {
 	entry: {
@@ -16,29 +17,28 @@ module.exports = {
 	},
 	devtool: "inline-source-map",
 	module: {
-		rules: [
-			{
+		rules: [{
+				test: /\.vue$/,
+				loader: 'vue-loader'
+			}, {
 				test: /\.js$/,
-				exclude: /node_modules/,
+				exclude: file => (/node_modules/.test(file) && !/\.vue\.js/.test(file)),
 				use: {
 					loader: 'babel-loader',
 					options: {
 						presets: ['@babel/preset-env'],
-					},
+					}
 				},
-			},
-			{
+			}, {
 				test: /\.html$/i,
 				loader: "html-loader",
-			},	  
-			{
+			}, {
 				test: /\.(woff|woff2|eot|ttf|otf)$/i,
 				type: 'asset/resource'
-			},
-			{
+			}, {
 				test: /\.s[ac]ss$/i,
 				use: [
-					'style-loader',
+					'vue-style-loader',
 					'css-loader',
 					'resolve-url-loader',
 					{
@@ -49,12 +49,10 @@ module.exports = {
 						}
 					}
 				]
-			},
-			{
+			}, {
 				test: /\.css$/i,
-				use: ["style-loader", "css-loader"],
-			},
-			{
+				use: ["vue-style-loader", "css-loader"],
+			}, {
 				test: /\.(png|svg|jpg|jpeg|gif)$/i,
 				use: {
 					loader: "url-loader",
@@ -92,7 +90,12 @@ module.exports = {
 			}]
 		}),
 		new SymlinkWebpackPlugin({ origin: '../files/', symlink: 'files' }),
-		new CleanWebpackPlugin()
+		new CleanWebpackPlugin(),
+		new webpack.DefinePlugin({
+			__VUE_OPTIONS_API__: 'true',
+			__VUE_PROD_DEVTOOLS__: 'false'
+		}),
+		new VueLoaderPlugin()
 	],
 	resolve: {
 		extensions: ['', '.js'],