Added HtmlWebpackPlugin and BundleAnalyzerPlugin

zoltantothcom · zoltantothcom · commit 0dc1f022ec04 · 2019-01-30T14:22:50.000-05:00
diff --git a/.gitignore b/.gitignore
@@ -9,6 +9,9 @@
 # production
 /build
 
+# analyzer
+/stats
+
 # misc
 .DS_Store
 .env.local
diff --git a/index.html b/index.html
@@ -1,10 +1,9 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>My React Configuration Setup</title>
+    <title>JavaScript Patterns</title>
   </head>
   <body>
-    <div id="root"></div>
-    <script src="./dist/bundle.js"></script>
+    <div id="root" />
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
   "scripts": {
     "start": "webpack-dev-server --mode development",
     "format": "prettier --write \"src/**/*.js\"",
+    "stats": "webpack-bundle-analyzer stats/stats.json",
     "build": "webpack --mode production"
   },
   "devDependencies": {
@@ -21,8 +22,10 @@
     "eslint-config-react": "^1.1.7",
     "eslint-loader": "^2.1.1",
     "eslint-plugin-react": "^7.12.4",
+    "html-webpack-plugin": "^3.2.0",
     "prettier": "1.16.2",
     "webpack": "^4.29.0",
+    "webpack-bundle-analyzer": "^3.0.3",
     "webpack-cli": "^3.2.1",
     "webpack-dev-server": "^3.1.14"
   }
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,16 +1,22 @@
 const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
 module.exports = {
   devtool: 'inline-source-map',
   entry: './src/index.js',
   output: {
-    path: path.join(__dirname, '/dist'),
+    path: path.join(__dirname, '/build'),
     publicPath: '/',
     filename: 'bundle.js'
   },
+  optimization: {
+    splitChunks: {
+      chunks: 'all'
+    }
+  },
   devServer: {
-    contentBase: './',
-    publicPath: '/dist/'
+    contentBase: './build'
   },
   module: {
     rules: [
@@ -20,5 +26,17 @@ module.exports = {
         use: ['babel-loader', 'eslint-loader']
       }
     ]
-  }
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      template: path.resolve('./index.html')
+    }),
+    new BundleAnalyzerPlugin({
+      analyzerMode: 'disabled',
+      generateStatsFile: true,
+      statsOptions: { source: false },
+      statsFilename: path.join(__dirname, 'stats/stats.json')
+    })
+  ],
+  performance: { hints: false }
 };
diff --git a/yarn.lock b/yarn.lock
