Upgrade to webpack 4 (#1337)

package.json

@@ -18,7 +18,7 @@
   "devDependencies": {
     "babel-eslint": "^8.1.2",
     "babel-jest": "^22.0.4",
-    "babel-loader": "^7.1.2",
+    "babel-loader": "^7.1.4",
     "babel-plugin-transform-class-properties": "^6.23.0",
     "babel-plugin-transform-runtime": "^6.15.0",
     "babel-preset-es2015": "^6.18.0",
@@ -26,11 +26,10 @@
     "babel-register": "^6.26.0",
     "benchmark": "^2.1.4",
     "check-dependencies": "^1.1.0",
-    "css-loader": "^0.28.8",
+    "css-loader": "^0.28.11",
     "eslint": "^4.14.0",
     "eslint-plugin-flowtype": "^2.40.1",
-    "extract-text-webpack-plugin": "^3.0.2",
-    "file-loader": "^1.1.6",
+    "file-loader": "^1.1.11",
     "flow-bin": "^0.73.0",
     "jest": "^22.0.4",
     "jest-serializer-html": "^4.0.1",
@@ -39,6 +38,7 @@
     "jspngopt": "^0.2.0",
     "less": "^3.0.4",
     "less-loader": "^4.1.0",
+    "mini-css-extract-plugin": "^0.4.0",
     "mkdirp": "^0.5.1",
     "pako": "1.0.4",
     "pre-commit": "^1.2.2",
@@ -46,13 +46,14 @@
     "rimraf": "^2.6.2",
     "selenium-webdriver": "^2.48.2",
     "sri-toolbox": "^0.2.0",
-    "style-loader": "^0.19.1",
+    "style-loader": "^0.21.0",
     "stylelint": "^8.4.0",
     "stylelint-config-standard": "^18.0.0",
     "uglifyjs-webpack-plugin": "^1.2.5",
-    "webpack": "^3.6.0",
-    "webpack-bundle-analyzer": "^2.11.1",
-    "webpack-dev-server": "^2.7.1"
+    "webpack": "^4.8.3",
+    "webpack-bundle-analyzer": "^2.13.0",
+    "webpack-cli": "^2.1.3",
+    "webpack-dev-server": "^3.1.4"
   },
   "bin": "cli.js",
   "scripts": {

webpack.common.js

@@ -1,8 +1,7 @@
 // @flow
 const path = require('path');
 const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
-const webpack = require('webpack');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 /*::
 type Target = {|
@@ -48,6 +47,7 @@ function createConfig(target /*: Target */, dev /*: boolean */,
         },
     };
     return {
+        mode: dev ? 'development' : 'production',
         context: __dirname,
         entry: {
             [target.name]: target.entry,
@@ -69,19 +69,18 @@ function createConfig(target /*: Target */, dev /*: boolean */,
                 },
                 {
                     test: /\.css$/,
-                    use: ExtractTextPlugin.extract({
-                        fallback: 'style-loader',
-                        use: [cssLoader],
-                    }),
+                    use: [
+                        dev ? 'style-loader' : MiniCssExtractPlugin.loader,
+                        cssLoader,
+                    ],
                 },
                 {
                     test: /\.less$/,
-                    use: ExtractTextPlugin.extract({
-                        fallback: 'style-loader',
-                        use: [cssLoader, {
-                            loader: 'less-loader',
-                        }],
-                    }),
+                    use: [
+                        dev ? 'style-loader' : MiniCssExtractPlugin.loader,
+                        cssLoader,
+                        'less-loader',
+                    ],
                 },
                 {
                     test: /\.(ttf|woff|woff2)$/,
@@ -96,23 +95,26 @@ function createConfig(target /*: Target */, dev /*: boolean */,
         },
         externals: 'katex',
         plugins: [
-            new webpack.EnvironmentPlugin({
-                NODE_ENV: dev ? 'development' : 'production',
-            }),
-            dev && new webpack.NamedModulesPlugin(),
-            minimize && new UglifyJsPlugin({
-                uglifyOptions: {
-                    output: {
-                        ascii_only: true,
-                    },
-                },
-            }),
-            new ExtractTextPlugin({
+            !dev && new MiniCssExtractPlugin({
                 filename: minimize ? '[name].min.css' : '[name].css',
-                disable: dev,
             }),
         ].filter(Boolean),
         devtool: dev && 'inline-source-map',
+        optimization: {
+            minimize,
+            minimizer: [
+                new UglifyJsPlugin({
+                    uglifyOptions: {
+                        output: {
+                            ascii_only: true,
+                        },
+                    },
+                }),
+            ],
+        },
+        performance: {
+            hints: false,
+        },
     };
 }