[Feature] Webpack 4 upgrade

package.json

@@ -8,111 +8,111 @@
   },
   "browserslist": [">1%", "last 4 versions", "Firefox ESR", "not ie < 9"],
   "dependencies": {
-    "@babel/polyfill": "7.0.0-beta.39",
+    "@babel/polyfill": "7.0.0-beta.40",
     "bluebird": "^3.5.1",
     "body-parser": "^1.18.2",
     "classnames": "^2.2.5",
     "cookie-parser": "^1.4.3",
     "core-js": "^2.5.3",
     "express": "^4.16.2",
-    "express-graphql": "^0.6.11",
+    "express-graphql": "^0.6.12",
     "express-jwt": "^5.3.0",
-    "graphql": "^0.12.3",
+    "graphql": "^0.13.1",
     "history": "^4.7.2",
     "isomorphic-style-loader": "^4.0.0",
-    "jsonwebtoken": "^8.1.0",
-    "node-fetch": "^2.0.0",
-    "normalize.css": "^7.0.0",
+    "jsonwebtoken": "^8.2.0",
+    "node-fetch": "^2.1.1",
+    "normalize.css": "^8.0.0",
     "passport": "^0.4.0",
     "passport-facebook": "^2.1.1",
     "pretty-error": "^2.1.1",
-    "prop-types": "^15.6.0",
-    "query-string": "^5.0.1",
+    "prop-types": "^15.6.1",
+    "query-string": "^5.1.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
-    "sequelize": "^4.28.6",
-    "serialize-javascript": "^1.3.0",
-    "source-map-support": "^0.5.0",
+    "sequelize": "^4.35.2",
+    "serialize-javascript": "^1.4.0",
+    "source-map-support": "^0.5.3",
     "sqlite3": "^3.1.13",
     "universal-router": "^6.0.0",
     "whatwg-fetch": "^2.0.3"
   },
   "devDependencies": {
-    "@babel/core": "7.0.0-beta.39",
-    "@babel/node": "7.0.0-beta.39",
-    "@babel/plugin-transform-react-constant-elements": "7.0.0-beta.39",
-    "@babel/plugin-transform-react-inline-elements": "7.0.0-beta.39",
-    "@babel/preset-env": "7.0.0-beta.39",
-    "@babel/preset-flow": "7.0.0-beta.39",
-    "@babel/preset-react": "7.0.0-beta.39",
-    "@babel/preset-stage-2": "7.0.0-beta.39",
+    "@babel/core": "7.0.0-beta.40",
+    "@babel/node": "7.0.0-beta.40",
+    "@babel/plugin-transform-react-constant-elements": "7.0.0-beta.40",
+    "@babel/plugin-transform-react-inline-elements": "7.0.0-beta.40",
+    "@babel/preset-env": "7.0.0-beta.40",
+    "@babel/preset-flow": "7.0.0-beta.40",
+    "@babel/preset-react": "7.0.0-beta.40",
+    "@babel/preset-stage-2": "7.0.0-beta.40",
     "assets-webpack-plugin": "^3.5.1",
-    "autoprefixer": "^7.2.3",
+    "autoprefixer": "^8.1.0",
     "babel-core": "^7.0.0-0",
-    "babel-eslint": "^8.1.2",
-    "babel-jest": "^22.0.4",
+    "babel-eslint": "^8.2.2",
+    "babel-jest": "^22.4.1",
     "babel-loader": "8.0.0-beta.0",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.12",
-    "browser-sync": "^2.21.0",
-    "chokidar": "^2.0.0",
-    "css-loader": "^0.28.7",
-    "enzyme": "^3.2.0",
-    "eslint": "^4.14.0",
+    "babel-plugin-transform-react-remove-prop-types": "^0.4.13",
+    "browser-sync": "^2.23.6",
+    "chokidar": "^2.0.2",
+    "css-loader": "^0.28.10",
+    "enzyme": "^3.3.0",
+    "eslint": "^4.18.2",
     "eslint-config-airbnb": "^16.1.0",
     "eslint-config-prettier": "^2.9.0",
-    "eslint-import-resolver-node": "^0.3.1",
-    "eslint-loader": "^1.9.0",
+    "eslint-import-resolver-node": "^0.3.2",
+    "eslint-loader": "^2.0.0",
     "eslint-plugin-css-modules": "^2.7.5",
-    "eslint-plugin-flowtype": "^2.40.1",
-    "eslint-plugin-import": "^2.8.0",
+    "eslint-plugin-flowtype": "^2.46.1",
+    "eslint-plugin-import": "^2.9.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
-    "eslint-plugin-prettier": "^2.4.0",
-    "eslint-plugin-react": "^7.5.1",
-    "file-loader": "^1.1.6",
-    "flow-bin": "^0.65.0",
+    "eslint-plugin-prettier": "^2.6.0",
+    "eslint-plugin-react": "^7.7.0",
+    "file-loader": "^1.1.11",
+    "flow-bin": "^0.66.0",
     "front-matter": "^2.3.0",
     "glob": "^7.1.2",
     "husky": "^0.14.3",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^22.0.4",
-    "lint-staged": "^6.0.0",
-    "markdown-it": "^8.4.0",
+    "jest": "^22.4.2",
+    "lint-staged": "^7.0.0",
+    "markdown-it": "^8.4.1",
     "mkdirp": "^0.5.1",
     "null-loader": "^0.1.1",
     "opn-cli": "^3.1.0",
     "pixrem": "^4.0.1",
     "pleeease-filters": "^4.0.0",
-    "postcss": "^6.0.14",
+    "postcss": "^6.0.19",
     "postcss-calc": "^6.0.1",
     "postcss-color-function": "^4.0.1",
     "postcss-custom-media": "^6.0.0",
-    "postcss-custom-properties": "^6.2.0",
+    "postcss-custom-properties": "^7.0.0",
     "postcss-custom-selectors": "^4.0.1",
-    "postcss-flexbugs-fixes": "^3.2.0",
-    "postcss-import": "^11.0.0",
-    "postcss-loader": "^2.0.9",
+    "postcss-flexbugs-fixes": "^3.3.0",
+    "postcss-import": "^11.1.0",
+    "postcss-loader": "^2.1.1",
     "postcss-media-minmax": "^3.0.0",
     "postcss-nested": "^3.0.0",
     "postcss-nesting": "^4.2.1",
     "postcss-pseudoelements": "^5.0.0",
     "postcss-selector-matches": "^3.0.1",
     "postcss-selector-not": "^3.0.1",
-    "prettier": "^1.9.2",
+    "prettier": "^1.11.1",
     "raw-loader": "^0.5.1",
     "react-deep-force-update": "^2.1.1",
     "react-dev-utils": "^5.0.0",
     "react-error-overlay": "^4.0.0",
     "react-test-renderer": "^16.2.0",
     "rimraf": "^2.6.2",
-    "stylelint": "^8.4.0",
-    "stylelint-config-standard": "^18.0.0",
-    "stylelint-order": "^0.8.0",
+    "stylelint": "^9.1.1",
+    "stylelint-config-standard": "^18.2.0",
+    "stylelint-order": "^0.8.1",
     "svg-url-loader": "^2.3.1",
-    "url-loader": "^0.6.2",
-    "webpack": "^3.10.0",
-    "webpack-bundle-analyzer": "^2.9.1",
-    "webpack-dev-middleware": "^2.0.3",
-    "webpack-hot-middleware": "^2.21.0",
+    "url-loader": "^1.0.1",
+    "webpack": "^4.1.0",
+    "webpack-bundle-analyzer": "^2.11.1",
+    "webpack-dev-middleware": "^3.0.1",
+    "webpack-hot-middleware": "^2.21.2",
     "webpack-node-externals": "^1.6.0"
   },
   "lint-staged": {

src/routes/about/index.js

@@ -14,7 +14,7 @@ import about from './about.md';
 
 function action() {
   return {
-    chunks: ['about'],
+    chunk: 'about',
     title: about.title,
     component: (
       <Layout>

src/routes/admin/index.js

@@ -20,7 +20,7 @@ function action() {
   }
 
   return {
-    chunks: ['admin'],
+    chunk: 'admin',
     title,
     component: (
       <Layout>

src/routes/contact/index.js

@@ -15,7 +15,7 @@ const title = 'Contact Us';
 
 function action() {
   return {
-    chunks: ['contact'],
+    chunk: 'contact',
     title,
     component: (
       <Layout>

src/routes/home/index.js

@@ -21,6 +21,7 @@ async function action({ fetch }) {
   if (!data || !data.news) throw new Error('Failed to load the news feed.');
   return {
     title: 'React Starter Kit',
+    chunk: 'home',
     component: (
       <Layout>
         <Home news={data.news} />

src/routes/index.js

@@ -19,7 +19,7 @@ const routes = {
     // added to client.js as well and not repeated in each individual route chunk.
     {
       path: '',
-      load: () => import(/* webpackMode: 'eager' */ './home'),
+      load: () => import(/* webpackChunkName: 'home' */ './home'),
     },
     {
       path: '/contact',

src/routes/login/index.js

@@ -15,7 +15,7 @@ const title = 'Log In';
 
 function action() {
   return {
-    chunks: ['login'],
+    chunk: 'login',
     title,
     component: (
       <Layout>

src/routes/not-found/index.js

@@ -15,7 +15,7 @@ const title = 'Page Not Found';
 
 function action() {
   return {
-    chunks: ['not-found'],
+    chunk: 'not-found',
     title,
     component: (
       <Layout>

src/routes/privacy/index.js

@@ -14,7 +14,7 @@ import privacy from './privacy.md';
 
 function action() {
   return {
-    chunks: ['privacy'],
+    chunk: 'privacy',
     title: privacy.title,
     component: (
       <Layout>

src/routes/register/index.js

@@ -15,7 +15,7 @@ const title = 'New User Registration';
 
 function action() {
   return {
-    chunks: ['register'],
+    chunk: 'register',
     title,
     component: (
       <Layout>

src/server.js

@@ -162,8 +162,12 @@ app.get('*', async (req, res, next) => {
     );
     data.styles = [{ id: 'css', cssText: [...css].join('') }];
     data.scripts = [assets.vendor.js];
-    if (route.chunks) {
-      data.scripts.push(...route.chunks.map(chunk => assets[chunk].js));
+    if (route.chunk) {
+      data.scripts.push(
+        ...Object.keys(assets)
+          .filter(asset => asset.includes(route.chunk))
+          .map(chunk => assets[chunk].js),
+      );
     }
     data.scripts.push(assets.client.js);
     data.app = {

tools/webpack.config.js

@@ -40,6 +40,8 @@ const minimizeCssOptions = {
 const config = {
   context: path.resolve(__dirname, '..'),
 
+  mode: isDebug ? 'development' : 'production',
+
   output: {
     path: path.resolve(__dirname, '../build/public/assets'),
     publicPath: '/assets/',
@@ -302,7 +304,6 @@ const clientConfig = {
     // Define free variables
     // https://webpack.js.org/plugins/define-plugin/
     new webpack.DefinePlugin({
-      'process.env.NODE_ENV': isDebug ? '"development"' : '"production"',
       'process.env.BROWSER': true,
       __DEV__: isDebug,
     }),
@@ -315,45 +316,28 @@ const clientConfig = {
       prettyPrint: true,
     }),
 
-    // Move modules that occur in multiple entry chunks to a new entry chunk (the commons chunk).
-    // https://webpack.js.org/plugins/commons-chunk-plugin/
-    new webpack.optimize.CommonsChunkPlugin({
-      name: 'vendor',
-      minChunks: module => /node_modules/.test(module.resource),
-    }),
-
     ...(isDebug
       ? []
       : [
-          // Decrease script evaluation time
-          // https://github.com/webpack/webpack/blob/master/examples/scope-hoisting/README.md
-          new webpack.optimize.ModuleConcatenationPlugin(),
-
-          // Minimize all JavaScript output of chunks
-          // https://github.com/mishoo/UglifyJS2#compressor-options
-          new webpack.optimize.UglifyJsPlugin({
-            compress: {
-              warnings: isVerbose,
-              unused: true,
-              dead_code: true,
-              screw_ie8: true,
-            },
-            mangle: {
-              screw_ie8: true,
-            },
-            output: {
-              comments: false,
-              screw_ie8: true,
-            },
-            sourceMap: true,
-          }),
+          // Webpack Bundle Analyzer
+          // https://github.com/th0r/webpack-bundle-analyzer
+          ...(isAnalyze ? [new BundleAnalyzerPlugin()] : []),
         ]),
-
-    // Webpack Bundle Analyzer
-    // https://github.com/th0r/webpack-bundle-analyzer
-    ...(isAnalyze ? [new BundleAnalyzerPlugin()] : []),
   ],
 
+  // Move modules that occur in multiple entry chunks to a new entry chunk (the commons chunk).
+  optimization: {
+    splitChunks: {
+      cacheGroups: {
+        commons: {
+          chunks: 'initial',
+          test: /[\\/]node_modules[\\/]/,
+          name: 'vendor',
+        },
+      },
+    },
+  },
+
   // Some libraries import Node modules but don't use them in the browser.
   // Tell Webpack to provide empty mocks for them so importing them works.
   // https://webpack.js.org/configuration/node/
@@ -453,7 +437,6 @@ const serverConfig = {
     // Define free variables
     // https://webpack.js.org/plugins/define-plugin/
     new webpack.DefinePlugin({
-      'process.env.NODE_ENV': isDebug ? '"development"' : '"production"',
       'process.env.BROWSER': false,
       __DEV__: isDebug,
     }),