Upgrade to webpack 4

.eslintrc.yml

@@ -2,8 +2,7 @@
   extends:
     airbnb-base
 
-  parser:
-    @babel/eslint-parser
+  parser: "@babel/eslint-parser"
 
   settings:
     ecmascript: 7

package.json

@@ -7,8 +7,8 @@
     "start": "webpack-dev-server",
     "dev": "webpack-dashboard -t 'Project' -- webpack-dev-server",
     "clean": "shx rm -rf ./build",
-    "build": "npm run clean && cross-env NODE_ENV=\"production\" webpack",
-    "preview": "cross-env NODE_ENV=\"production\" webpack-dev-server",
+    "build": "npm run clean && cross-env webpack",
+    "preview": "cross-env webpack-dev-server",
     "lint:js": "eslint ./src ./webpack ./*.js -f table --ext .js --ext .jsx",
     "lint:scss": "stylelint ./src/**/*.scss --syntax scss",
     "lint": "npm run lint:js && npm run lint:scss"
@@ -25,26 +25,28 @@
     "babel-preset-env": "^1.7.0",
     "babel-preset-stage-0": "^6.24.1",
     "case-sensitive-paths-webpack-plugin": "^2.4.0",
-    "copy-webpack-plugin": "^4.6.0",
+    "copy-webpack-plugin": "^5.1.1",
     "cross-env": "^7.0.3",
-    "css-loader": "^0.28.11",
+    "css-loader": "^1.0.1",
     "eslint": "^7.21.0",
     "eslint-config-airbnb-base": "^14.2.1",
     "eslint-plugin-import": "2.22.1",
     "extract-text-webpack-plugin": "^3.0.2",
-    "html-webpack-plugin": "^3.2.0",
+    "html-webpack-plugin": "^4.0.0",
     "imagemin-webpack-plugin": "^2.4.2",
+    "mini-css-extract-plugin": "^0.8.0",
     "node-sass": "^4.14.1",
     "postcss-loader": "^3.0.0",
     "postcss-preset-env": "^6.7.0",
     "sass-loader": "^7.3.1",
     "shx": "^0.3.3",
-    "style-loader": "^0.23.1",
+    "style-loader": "^1.3.0",
     "stylelint": "^13.11.0",
     "stylelint-config-standard": "^20.0.0",
-    "webpack": "^3.10.0",
+    "webpack": "^4.46.0",
+    "webpack-cli": "^3.3.12",
     "webpack-dashboard": "^3.3.1",
-    "webpack-dev-server": "^2.11.5"
+    "webpack-dev-server": "^3.11.2"
   },
   "dependencies": {
     "babel-polyfill": "^6.26.0",

webpack/config.js

@@ -54,6 +54,7 @@ module.exports = {
   context: path.join(manifest.paths.src, manifest.entries.js),
   watch: !manifest.IS_PRODUCTION,
   entry,
+  mode: manifest.NODE_ENV,
   output: {
     path: manifest.paths.build,
     publicPath: '',

webpack/plugins/extractPlugin.js

@@ -1,8 +1,8 @@
 const
   manifest          = require('../manifest'),
-  ExtractTextPlugin = require('extract-text-webpack-plugin');
+  ExtractTextPlugin = require('mini-css-extract-plugin');
 
 module.exports = new ExtractTextPlugin({
   filename: manifest.outputFiles.css,
-  allChunks: true,
+  // allChunks: true,
 });

webpack/plugins/internal.js

@@ -28,20 +28,21 @@ const
   plugins  = [];
 
 plugins.push(
-  new webpack.DefinePlugin({
-    'process.env': {
-      NODE_ENV: JSON.stringify(manifest.NODE_ENV),
-    },
-  }),
-
-  new webpack.optimize.CommonsChunkPlugin({
-    name: 'vendor',
-    filename: manifest.outputFiles.vendor,
-    minChunks(module) {
-      const { context } = module;
-      return context && context.indexOf('node_modules') >= 0;
-    },
-  }),
+  // new webpack.DefinePlugin({
+  //   'process.env': {
+  //     NODE_ENV: JSON.stringify(manifest.NODE_ENV),
+  //   },
+  // }),
+
+
+  // new webpack.optimize.CommonsChunkPlugin({
+  //   name: 'vendor',
+  //   filename: manifest.outputFiles.vendor,
+  //   minChunks(module) {
+  //     const { context } = module;
+  //     return context && context.indexOf('node_modules') >= 0;
+  //   },
+  // }),
 
   new webpack.ProvidePlugin({
     $: 'jquery',
@@ -56,29 +57,29 @@ plugins.push(
 // @Merging Production Plugins
 // ---------------------------
 
-if (manifest.IS_PRODUCTION) {
-  plugins.push(
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        comparisons   : true,
-        conditionals  : true,
-        dead_code     : true,
-        drop_debugger : true,
-        evaluate      : true,
-        if_return     : true,
-        join_vars     : true,
-        screw_ie8     : true,
-        sequences     : true,
-        unused        : true,
-        warnings      : false,
-      },
-
-      output: {
-        comments: false,
-      },
-    })
-  );
-}
+// if (manifest.IS_PRODUCTION) {
+//   plugins.push(
+//     new webpack.optimize.UglifyJsPlugin({
+//       compress: {
+//         comparisons   : true,
+//         conditionals  : true,
+//         dead_code     : true,
+//         drop_debugger : true,
+//         evaluate      : true,
+//         if_return     : true,
+//         join_vars     : true,
+//         screw_ie8     : true,
+//         sequences     : true,
+//         unused        : true,
+//         warnings      : false,
+//       },
+
+//       output: {
+//         comments: false,
+//       },
+//     })
+//   );
+// }
 
 
 // ----------------------------
@@ -87,8 +88,8 @@ if (manifest.IS_PRODUCTION) {
 
 if (manifest.IS_DEVELOPMENT) {
   plugins.push(
-    new webpack.NoEmitOnErrorsPlugin(),
-    new webpack.NamedModulesPlugin(),
+    // new webpack.NoEmitOnErrorsPlugin(),
+    // new webpack.NamedModulesPlugin(),
     new webpack.HotModuleReplacementPlugin()
   );
 }

webpack/rules/css.js

@@ -17,7 +17,7 @@
 
 const
   manifest          = require('../manifest'),
-  ExtractTextPlugin = require('extract-text-webpack-plugin');
+  ExtractTextPlugin = require('mini-css-extract-plugin');
 
 
 // ---------------
@@ -31,7 +31,8 @@ const loaders = [
     loader: 'css-loader',
     options: {
       sourceMap : manifest.IS_DEVELOPMENT,
-      minimize  : manifest.IS_PRODUCTION,
+      // minimize  : manifest.IS_PRODUCTION,
+      importLoaders: 1,
     },
   },
 ];
@@ -44,9 +45,10 @@ const loaders = [
 if (manifest.IS_PRODUCTION) {
   rule = {
     test: /\.css$/,
-    loader: ExtractTextPlugin.extract({
-      use: loaders,
-    }),
+    // loader: ExtractTextPlugin({
+    //   use: loaders,
+    // }),
+    use: [ExtractTextPlugin.loader, loaders],
   };
 }