Optimize build

webpack.config.js

@@ -1,11 +1,23 @@
 const path = require('path');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
+const HtmlWebPackPlugin = require("html-webpack-plugin");
+
+const plugins = [
+    new HtmlWebPackPlugin({
+        template: './client/index.html',
+        filename: './index.html',
+    }),
+];
+  
+if (process.env.NODE_ENV === "analyse") {
+    plugins.push(new BundleAnalyzerPlugin());
+}
 
 module.exports = {
     entry: './client/index.jsx',
     output: {
-        path: path.join(__dirname, 'build'),
-        filename: 'bundle.js',
+        path: path.join(__dirname, 'dist'),
+        filename: '[name].[contenthash].js',
         // It's very important
         // All the chunk generated by webpack then will be loaded such as
         // <script charset="utf-8" src="/[chunk-name].bundle.js"></script>
@@ -30,10 +42,38 @@ module.exports = {
     },
     devtool: 'cheap-module-eavl-source-map',
     devServer: {
-        contentBase: path.join(__dirname, 'build'),
+        contentBase: path.join(__dirname, 'dist'),
         historyApiFallback: true,
     },
-    plugins: [
-        new BundleAnalyzerPlugin(),
-    ],
+    plugins,
+    // See https://webpack.js.org/guides/caching/
+    optimization: {
+        runtimeChunk: 'single',
+        moduleIds: 'hashed',
+        splitChunks: {
+            chunks: 'all',
+            maxInitialRequests: Infinity,
+            minSize: 0,
+            cacheGroups: {
+                vendor: {
+                    // sync + async chunks
+                    chunks: 'all',
+                    name: 'vendors',
+                    // import file path containing node_modules
+                    test: /[\\/]node_modules[\\/]/,
+                    priority: 20,
+                },
+                /*
+                common: {
+                    name: 'common',
+                    minChunks: 2,
+                    chunks: 'all',
+                    priority: 10,
+                    reuseExistingChunk: true,
+                    enforce: true,
+                },
+                */
+            },
+        },
+    }, 
 };