webpack optimizations

1 files changed, 67 insertions, 17 deletions

diff --git a/vnext/webpack.config.js b/vnext/webpack.config.js
index 4c32597c..f63beb4c 100644
--- a/vnext/webpack.config.js
+++ b/vnext/webpack.config.js
@@ -1,5 +1,9 @@
 const webpack = require('webpack');
+const path = require('path');
+const HtmlWebPackPlugin = require("html-webpack-plugin");
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
+const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
 const history = require('connect-history-api-fallback');
 const convert = require('koa-connect');
 const internalIp = require('internal-ip');
@@ -9,13 +13,17 @@ module.exports = {
     mode: process.env.WEBPACK_SERVE ? 'development' : 'production',
     entry: {
         'Juick': [
-            'babel-polyfill',
             'whatwg-fetch',
-            'file-loader?name=index.html!./src/views/index.html',
             __dirname + '/src/index.js',
             __dirname + '/src/style/main.css'
         ]
     },
+    output: {
+        filename: process.env.WEBPACK_SERVE ? '[name].js' : '[name].[chunkhash].bundle.js',
+        chunkFilename: process.env.WEBPACK_SERVE ? '[name].js' : '[name].[chunkhash].bundle.js',
+        publicPath: '/',
+        path: path.resolve(__dirname, 'dist')
+    },
     module: {
         rules: [
             {
@@ -36,27 +44,69 @@ module.exports = {
                     }
                 ]
             },
-
-            { test: /\.js$/, exclude: /node_modules\/(?!query-string)/, loader: 'babel-loader' },
-            { test: /\.(jpe?g|png|gif|svg)$/i, loaders: [
-            'file-loader?hash=sha512&digest=hex&name=[hash].[ext]'
-        ]}
-	]
+            {
+                test: /\.html$/,
+                use: [
+                    {
+                        loader: "html-loader",
+                        options: { minimize: true }
+                    }
+                ]
+            },
+            {
+                test: /\.js$/,
+                exclude: /node_modules/,
+                loader: 'babel-loader'
+            },
+            {
+                test: /\.(jpe?g|png|gif|svg)$/i,
+                loaders: [
+                    'file-loader?hash=sha512&digest=hex&name=[hash].[ext]'
+                ]
+            }
+        ]
+    },
+    optimization: {
+        minimizer: [
+            new UglifyJsPlugin({
+                cache: true,
+                parallel: true,
+                sourceMap: Boolean(process.env.WEBPACK_SERVE)
+            }),
+            new OptimizeCSSAssetsPlugin({})
+        ],
+        splitChunks: {
+            cacheGroups: {
+                vendor: {
+                    test: /node_modules/,
+                    chunks: 'initial',
+                    name: 'vendor',
+                    enforce: true
+                },
+            }
+        }
     },
     plugins: [
         new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
-        new MiniCssExtractPlugin({ filename: "Juick.css", allChunks: true })
+        new MiniCssExtractPlugin({
+            filename: "Juick.[contenthash].css",
+            allChunks: true
+        }),
+        new HtmlWebPackPlugin({
+            template: "./src/views/index.html",
+            filename: "./index.html"
+        })
     ],
 };
 
 module.exports.serve = {
-  content: [__dirname],
-  host: internalIp.v4.sync(),
-  add: (app, middleware, options) => {
-    const historyOptions = {
-      // ... see: https://github.com/bripkens/connect-history-api-fallback#options
-    };
+    content: [__dirname],
+    host: internalIp.v4.sync(),
+    add: (app, middleware, options) => {
+        const historyOptions = {
+            // ... see: https://github.com/bripkens/connect-history-api-fallback#options
+        };
 
-    app.use(convert(history(historyOptions)));
-  }
+        app.use(convert(history(historyOptions)));
+    }
 };