Переделка конфигов webpack для лучшей сборки

build/webpack.base.config.js

@@ -2,12 +2,12 @@ const path = require("path");
 const webpack = require("webpack");
 const VueLoaderPlugin = require('vue-loader/lib/plugin');
 
+const clientDir = path.resolve(__dirname, '../client');
+
 module.exports = {
-    entry: [path.resolve(__dirname, '../client/main.js')],
+    entry: [`${clientDir}/main.js`],
     output: {
-        path: path.resolve(__dirname, '../server/public/app'),
         publicPath: '/app/',
-        filename: 'bundle.js'
     },
 
     module: {
@@ -23,7 +23,7 @@ module.exports = {
                         'syntax-dynamic-import',
                         'transform-decorators-legacy',
                         'transform-class-properties',
-                        ["component", { "libraryName": "element-ui", "styleLibraryName": "~client/theme" } ]
+                        ["component", { "libraryName": "element-ui", "styleLibraryName": `~${clientDir}/theme` } ]
                     ]
                 }
             },
@@ -61,6 +61,6 @@ module.exports = {
     },
 
     plugins: [
-        new VueLoaderPlugin()
+        new VueLoaderPlugin(),
     ]
 };

build/webpack.dev.config.js

@@ -5,10 +5,18 @@ const merge = require("webpack-merge");
 const baseWpConfig = require("./webpack.base.config");
 
 baseWpConfig.entry.unshift("webpack-hot-middleware/client");
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+const publicDir = path.resolve(__dirname, '../server/public');
+const clientDir = path.resolve(__dirname, '../client');
 
 module.exports = merge(baseWpConfig, {
-    mode: 'none',
+    mode: 'development',
     devtool: "#inline-source-map",
+    output: {
+        path: `${publicDir}/app`,
+        filename: 'bundle.js'
+    },
 
     module: {
         rules: [
@@ -28,6 +36,10 @@ module.exports = merge(baseWpConfig, {
 
     plugins: [
         new webpack.HotModuleReplacementPlugin(),
-        new webpack.NoEmitOnErrorsPlugin()
+        new webpack.NoEmitOnErrorsPlugin(),
+        new HtmlWebpackPlugin({
+            template: `${clientDir}/index.html.template`,
+            filename: `${publicDir}/index.html`
+        })
     ]
 });

build/webpack.prod.config.js

@@ -7,9 +7,17 @@ const TerserPlugin = require('terser-webpack-plugin');
 const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const CleanWebpackPlugin = require('clean-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+const publicDir = path.resolve(__dirname, '../dist/public');
+const clientDir = path.resolve(__dirname, '../client');
 
 module.exports = merge(baseWpConfig, {
     mode: 'production',
+    output: {
+        path: `${publicDir}/app`,
+        filename: 'bundle.[contenthash].js'
+    },
     module: {
         rules: [
             {
@@ -32,9 +40,13 @@ module.exports = merge(baseWpConfig, {
         ]
     },
     plugins: [
-        new CleanWebpackPlugin([`${baseWpConfig.output.path}/*.*`], {root: path.resolve(__dirname, '..')}),
+        new CleanWebpackPlugin([`${publicDir}`], {root: path.resolve(__dirname, '..')}),
         new MiniCssExtractPlugin({
-            filename: "[name].css"
+            filename: "[name].[contenthash].css"
+        }),
+        new HtmlWebpackPlugin({
+            template: `${clientDir}/index.html.template`,
+            filename: `${publicDir}/index.html`
         })
     ]
 });