feat: upgrade to webpack@3

Author: mattlubner

package.json

@@ -31,7 +31,7 @@
   "author": "Prashant Abhishek <prashant.abhishek7g@gmail.com>, Mayank Chandola <imayankchd@gmail.com>, Sandeep Panda <sandeep@hashnode.com>, Syed Fazle Rahman <fazle@hashnode.com>, Alkshendra Maurya <alkshendra@hashnode.com>",
   "license": "MIT",
   "dependencies": {
-    "babel-core": "^6.9.1",
+    "babel-core": "^6.26.0",
     "body-parser": "^1.15.1",
     "compression": "^1.6.2",
     "cross-env": "^1.0.8",
@@ -55,20 +55,20 @@
   "devDependencies": {
     "ava": "^0.15.2",
     "babel-eslint": "^6.0.4",
-    "babel-loader": "^6.2.4",
-    "babel-plugin-webpack-loaders": "^0.7.0",
-    "babel-polyfill": "^6.9.1",
+    "babel-loader": "^7.1.2",
+    "babel-plugin-webpack-loaders": "^0.9.0",
+    "babel-polyfill": "^6.26.0",
     "babel-preset-es2015": "^6.9.0",
     "babel-preset-es2015-native-modules": "^6.6.0",
     "babel-preset-react": "^6.5.0",
     "babel-preset-react-optimize": "^1.0.1",
     "babel-preset-stage-0": "^6.5.0",
-    "babel-register": "^6.9.0",
+    "babel-register": "^6.26.0",
     "chai": "^3.5.0",
-    "chunk-manifest-webpack-plugin": "0.1.0",
+    "chunk-manifest-webpack-plugin": "^1.1.2",
     "coveralls": "^2.11.9",
-    "css-loader": "^0.23.1",
-    "css-modules-require-hook": "^4.0.1",
+    "css-loader": "^0.28.7",
+    "css-modules-require-hook": "^4.2.2",
     "cssnano": "^3.7.0",
     "enzyme": "^2.3.0",
     "eslint": "^2.11.1",
@@ -78,10 +78,9 @@
     "eslint-plugin-jsx-a11y": "^1.3.0",
     "eslint-plugin-react": "^5.1.1",
     "eventsource-polyfill": "^0.9.6",
-    "extract-text-webpack-plugin": "^1.0.1",
+    "extract-text-webpack-plugin": "^3.0.2",
     "file-loader": "^0.8.5",
     "jsdom": "^9.2.1",
-    "json-loader": "^0.5.4",
     "mock-css-modules": "^1.0.0",
     "mockgoose": "^6.0.3",
     "nock": "^8.0.0",
@@ -90,7 +89,7 @@
     "nyc": "^6.4.4",
     "postcss-cssnext": "^2.6.0",
     "postcss-focus": "^1.0.0",
-    "postcss-loader": "^0.9.1",
+    "postcss-loader": "^2.0.9",
     "postcss-reporter": "^1.3.3",
     "pre-commit": "^1.1.3",
     "react-addons-test-utils": "^15.1.0",
@@ -101,15 +100,15 @@
     "redux-devtools-log-monitor": "^1.0.11",
     "rimraf": "^2.5.2",
     "sinon": "^1.17.4",
-    "style-loader": "^0.13.1",
+    "style-loader": "^0.19.1",
     "supertest": "^1.2.0",
     "url-loader": "^0.5.7",
-    "webpack": "2.1.0-beta.8",
-    "webpack-dev-middleware": "^1.6.1",
-    "webpack-dev-server": "^2.1.0-beta.0",
-    "webpack-externals-plugin": "^1.0.0",
-    "webpack-hot-middleware": "^2.10.0",
-    "webpack-manifest-plugin": "^1.0.1"
+    "webpack": "^3.10.0",
+    "webpack-dev-middleware": "^1.12.2",
+    "webpack-dev-server": "^2.9.7",
+    "webpack-hot-middleware": "^2.21.0",
+    "webpack-manifest-plugin": "^1.3.2",
+    "webpack2-externals-plugin": "^1.0.0"
   },
   "engines": {
     "node": ">=4"

webpack.config.babel.js

@@ -13,32 +13,57 @@ module.exports = {
     libraryTarget: 'commonjs2',
   },
   resolve: {
-    extensions: ['', '.js', '.jsx'],
+    extensions: ['.js', '.jsx'],
     modules: [
       'client',
       'node_modules',
     ],
   },
   module: {
-    loaders: [
+    rules: [
       {
         test: /\.css$/,
         exclude: /node_modules/,
-        loader: 'style-loader!css-loader?localIdentName=' + cssModulesIdentName + '&modules&importLoaders=1&sourceMap!postcss-loader',
+        use: [
+          {
+            loader: 'style-loader',
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              localIdentName: cssModulesIdentName,
+              modules: true,
+              importLoaders: 1,
+              sourceMap: true,
+            },
+          },
+          {
+            loader: 'postcss-loader',
+            options: {
+              plugins: () => [
+                postcssFocus(),
+                cssnext({
+                  browsers: ['last 2 versions', 'IE > 10'],
+                }),
+                postcssReporter({
+                  clearMessages: true,
+                }),
+              ],
+            },
+          },
+        ],
       },
       {
         test: /\.jpe?g$|\.gif$|\.png$|\.svg$/i,
-        loader: 'url-loader?limit=10000',
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              limit: 10000,
+            },
+          },
+        ],
       },
     ],
   },
-  postcss: () => [
-    postcssFocus(),
-    cssnext({
-      browsers: ['last 2 versions', 'IE > 10'],
-    }),
-    postcssReporter({
-      clearMessages: true,
-    }),
-  ],
 };

webpack.config.dev.js

@@ -27,33 +27,67 @@ module.exports = {
   },
 
   resolve: {
-    extensions: ['', '.js', '.jsx'],
+    extensions: ['.js', '.jsx'],
     modules: [
       'client',
       'node_modules',
     ],
   },
 
   module: {
-    loaders: [
+    rules: [
       {
-        test: /\.css$/,
+        test: /\.s?css$/,
         exclude: /node_modules/,
-        loader: 'style-loader!css-loader?localIdentName=[name]__[local]__[hash:base64:5]&modules&importLoaders=1&sourceMap!postcss-loader',
-      }, {
+        use: [
+          {
+            loader: 'style-loader',
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              localIdentName: '[name]__[local]__[hash:base64:5]',
+              modules: true,
+              importLoaders: 1,
+              sourceMap: true,
+            },
+          },
+          {
+            loader: 'postcss-loader',
+            options: {
+              plugins: () => [
+                postcssFocus(),
+                cssnext({
+                  browsers: ['last 2 versions', 'IE > 10'],
+                }),
+                postcssReporter({
+                  clearMessages: true,
+                }),
+              ],
+            },
+          },
+        ],
+      },
+      {
         test: /\.css$/,
         include: /node_modules/,
-        loaders: ['style-loader', 'css-loader'],
-      }, {
+        use: ['style-loader', 'css-loader'],
+      },
+      {
         test: /\.jsx*$/,
         exclude: [/node_modules/, /.+\.config.js/],
-        loader: 'babel',
-      }, {
+        use: 'babel-loader',
+      },
+      {
         test: /\.(jpe?g|gif|png|svg)$/i,
-        loader: 'url-loader?limit=10000',
-      }, {
-        test: /\.json$/,
-        loader: 'json-loader',
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              limit: 10000,
+            },
+          },
+        ],
       },
     ],
   },
@@ -72,14 +106,4 @@ module.exports = {
       }
     }),
   ],
-
-  postcss: () => [
-    postcssFocus(),
-    cssnext({
-      browsers: ['last 2 versions', 'IE > 10'],
-    }),
-    postcssReporter({
-      clearMessages: true,
-    }),
-  ],
 };

webpack.config.prod.js

@@ -27,33 +27,69 @@ module.exports = {
   },
 
   resolve: {
-    extensions: ['', '.js', '.jsx'],
+    extensions: ['.js', '.jsx'],
     modules: [
       'client',
       'node_modules',
     ],
   },
 
   module: {
-    loaders: [
+    rules: [
       {
-        test: /\.css$/,
+        test: /\.s?css$/,
         exclude: /node_modules/,
-        loader: ExtractTextPlugin.extract('style-loader', 'css-loader?localIdentName=[hash:base64]&modules&importLoaders=1!postcss-loader'),
-      }, {
+        use: ExtractTextPlugin.extract({
+          fallback: 'style-loader',
+          use: [
+            {
+              loader: 'css-loader',
+              options: {
+                localIdentName: '[hash:base64]',
+                modules: true,
+                importLoaders: 1,
+              },
+            },
+            {
+              loader: 'postcss-loader',
+              options: {
+                plugins: () => [
+                  postcssFocus(),
+                  cssnext({
+                    browsers: ['last 2 versions', 'IE > 10'],
+                  }),
+                  cssnano({
+                    autoprefixer: false,
+                  }),
+                  postcssReporter({
+                    clearMessages: true,
+                  }),
+                ],
+              },
+            },
+          ],
+        }),
+      },
+      {
         test: /\.css$/,
         include: /node_modules/,
-        loaders: ['style-loader', 'css-loader'],
-      }, {
+        use: ['style-loader', 'css-loader'],
+      },
+      {
         test: /\.jsx*$/,
         exclude: /node_modules/,
-        loader: 'babel',
-      }, {
+        use: 'babel-loader',
+      },
+      {
         test: /\.(jpe?g|gif|png|svg)$/i,
-        loader: 'url-loader?limit=10000',
-      }, {
-        test: /\.json$/,
-        loader: 'json-loader',
+        use: [
+          {
+            loader: 'url-loader',
+            options: {
+              limit: 10000,
+            },
+          },
+        ],
       },
     ],
   },
@@ -69,31 +105,17 @@ module.exports = {
       minChunks: Infinity,
       filename: 'vendor.js',
     }),
-    new ExtractTextPlugin('app.[chunkhash].css', { allChunks: true }),
+    new ExtractTextPlugin({
+      filename: 'app.[contenthash].css',
+      allChunks: true,
+    }),
     new ManifestPlugin({
       basePath: '/',
     }),
     new ChunkManifestPlugin({
       filename: "chunk-manifest.json",
       manifestVariable: "webpackManifest",
     }),
-    new webpack.optimize.UglifyJsPlugin({
-      compressor: {
-        warnings: false,
-      }
-    }),
-  ],
-
-  postcss: () => [
-    postcssFocus(),
-    cssnext({
-      browsers: ['last 2 versions', 'IE > 10'],
-    }),
-    cssnano({
-      autoprefixer: false
-    }),
-    postcssReporter({
-      clearMessages: true,
-    }),
+    new webpack.optimize.UglifyJsPlugin(),
   ],
 };

webpack.config.server.js

@@ -1,9 +1,8 @@
 var fs = require('fs');
 var path = require('path');
-var ExternalsPlugin = require('webpack-externals-plugin');
+var ExternalsPlugin = require('webpack2-externals-plugin');
 
 module.exports = {
-
   entry: path.resolve(__dirname, 'server/server.js'),
 
   output: {
@@ -19,44 +18,44 @@ module.exports = {
   },
 
   resolve: {
-    extensions: ['', '.js', '.jsx'],
+    extensions: ['.js', '.jsx'],
     modules: [
       'client',
       'node_modules',
     ],
   },
 
   module: {
-    loaders: [
+    rules: [
       {
         test: /\.js$/,
         exclude: /node_modules/,
-        loader: 'babel-loader',
-        query: {
-          presets: [
-            'react',
-            'es2015',
-            'stage-0',
-          ],
-          plugins: [
-            [
-              'babel-plugin-webpack-loaders', {
-                'config': './webpack.config.babel.js',
-                "verbose": false
-              }
-            ]
-          ]
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: [
+              'react',
+              'es2015',
+              'stage-0',
+            ],
+            plugins: [
+              [
+                'babel-plugin-webpack-loaders', {
+                  config: './webpack.config.babel.js',
+                  verbose: false,
+                },
+              ],
+            ],
+          },
         },
-      }, {
-        test: /\.json$/,
-        loader: 'json-loader',
       },
     ],
   },
+
   plugins: [
     new ExternalsPlugin({
       type: 'commonjs',
-      include: path.join(__dirname, './node_modules/'),
+      include: path.join(__dirname, 'node_modules'),
     }),
   ],
 };