Webpack 4 changes

Author: birkir

.modernizrrc renamed to .modernizrrc.json

@@ -2,7 +2,6 @@ import express from 'express';
 import createWebpackMiddleware from 'webpack-dev-middleware';
 import createWebpackHotMiddleware from 'webpack-hot-middleware';
 import ListenerManager from './listenerManager';
-import config from '../../config';
 import { log } from '../utils';
 
 class HotClientServer {
@@ -24,7 +23,7 @@ class HotClientServer {
       quiet: true,
       noInfo: true,
       headers: {
-        'Access-Control-Allow-Origin': `http://${config('host')}:${config('port')}`,
+        'Access-Control-Allow-Origin': '*',
       },
       // Ensure that the public path is taken from the compiler webpack config
       // as it will have been created as an absolute path to avoid conflicts
@@ -47,12 +46,13 @@ class HotClientServer {
       });
     });
 
-    compiler.plugin('done', (stats) => {
+    compiler.plugin('done', stats => {
       if (stats.hasErrors()) {
         log({
           title: 'client',
           level: 'error',
-          message: 'Build failed, please check the console for more information.',
+          message:
+            'Build failed, please check the console for more information.',
           notify: true,
         });
         console.error(stats.toString());
@@ -70,7 +70,9 @@ class HotClientServer {
   dispose() {
     this.webpackDevMiddleware.close();
 
-    return this.listenerManager ? this.listenerManager.dispose() : Promise.resolve();
+    return this.listenerManager
+      ? this.listenerManager.dispose()
+      : Promise.resolve();
   }
 }
 

internal/development/hotClientServer.js

@@ -4,7 +4,6 @@ import ExtractTextPlugin from 'extract-text-webpack-plugin';
 import nodeExternals from 'webpack-node-externals';
 import path from 'path';
 import webpack from 'webpack';
-import WebpackMd5Hash from 'webpack-md5-hash';
 
 import { happyPackPlugin, log } from '../utils';
 import { ifElse } from '../../shared/utils/logic';
@@ -55,15 +54,17 @@ export default function webpackConfigFactory(buildOptions) {
   const bundleConfig =
     isServer || isClient
       ? // This is either our "server" or "client" bundle.
-      config(['bundles', target])
+        config(['bundles', target])
       : // Otherwise it must be an additional node bundle.
-      config(['additionalNodeBundles', target]);
+        config(['additionalNodeBundles', target]);
 
   if (!bundleConfig) {
     throw new Error('No bundle configuration exists for target:', target);
   }
 
   let webpackConfig = {
+    // Webpack Mode
+    mode: ifDev('development', 'production'),
     // Define our entry chunks for our bundle.
     entry: {
       // We name our entry files "index" as it makes it easier for us to
@@ -80,9 +81,9 @@ export default function webpackConfigFactory(buildOptions) {
         // Required to support hot reloading of our client.
         ifDevClient(
           () =>
-            `webpack-hot-middleware/client?reload=true&path=http://${config('host')}:${config(
-              'clientDevServerPort',
-            )}/__webpack_hmr`,
+            `webpack-hot-middleware/client?reload=true&path=http://${config(
+              'host',
+            )}:${config('clientDevServerPort')}/__webpack_hmr`,
         ),
 
         // The source entry file for the bundle.
@@ -127,9 +128,9 @@ export default function webpackConfigFactory(buildOptions) {
 
     target: isClient
       ? // Only our client bundle will target the web as a runtime.
-      'web'
+        'web'
       : // Any other bundle must be targetting node as a runtime.
-      'node',
+        'node',
 
     // Ensure that webpack polyfills the following node features for use
     // within any bundles that are targetting node as a runtime. This will be
@@ -177,7 +178,7 @@ export default function webpackConfigFactory(buildOptions) {
       // This is required for the modernizr-loader
       // @see https://github.com/peerigon/modernizr-loader
       alias: {
-        modernizr$: path.resolve(appRootDir.get(), './.modernizrrc'),
+        modernizr$: path.resolve(appRootDir.get(), './.modernizrrc.json'),
       },
     },
 
@@ -227,13 +228,6 @@ export default function webpackConfigFactory(buildOptions) {
       // the significant improvement will be how fast the JavaScript loads in the browser.
       ifProdClient(new webpack.optimize.ModuleConcatenationPlugin()),
 
-      // We use this so that our generated [chunkhash]'s are only different if
-      // the content for our respective chunks have changed.  This optimises
-      // our long term browser caching strategy for our client bundle, avoiding
-      // cases where browsers end up having to download all the client chunks
-      // even though 1 or 2 may have only changed.
-      ifClient(() => new WebpackMd5Hash()),
-
       // These are process.env flags that you can use in your code in order to
       // have advanced control over what is included/excluded in your bundles.
       // For example you may only want certain parts of your code to be
@@ -408,6 +402,8 @@ export default function webpackConfigFactory(buildOptions) {
                   // React that the subtree hasn’t changed so React can completely
                   // skip it when reconciling.
                   ifProd('transform-react-constant-elements'),
+                  // Add syntax dynamic import for direct webpack `import()` support
+                  'syntax-dynamic-import',
                 ].filter(x => x != null),
               },
               buildOptions,
@@ -452,7 +448,9 @@ export default function webpackConfigFactory(buildOptions) {
               // details on what loader is being implemented.
               loader: 'happypack/loader?id=happypack-javascript',
               include: removeNil([
-                ...bundleConfig.srcPaths.map(srcPath => path.resolve(appRootDir.get(), srcPath)),
+                ...bundleConfig.srcPaths.map(srcPath =>
+                  path.resolve(appRootDir.get(), srcPath),
+                ),
                 ifProdClient(path.resolve(appRootDir.get(), 'src/html')),
               ]),
             },
@@ -501,10 +499,6 @@ export default function webpackConfigFactory(buildOptions) {
               test: /\.modernizrrc.js$/,
               loader: 'modernizr-loader',
             }),
-            ifClient({
-              test: /\.modernizrrc(\.json)?$/,
-              loader: 'modernizr-loader!json-loader',
-            }),
 
             // ASSETS (Images/Fonts/etc)
             // This is bound to our server/client bundles as we only expect to be
@@ -520,12 +514,12 @@ export default function webpackConfigFactory(buildOptions) {
                 // paths used on the client.
                 publicPath: isDev
                   ? // When running in dev mode the client bundle runs on a
-                  // seperate port so we need to put an absolute path here.
-              `http://${config('host')}:${config('clientDevServerPort')}${config(
-                'bundles.client.webPath',
-              )}`
+                    // seperate port so we need to put an absolute path here.
+                    `http://${config('host')}:${config(
+                      'clientDevServerPort',
+                    )}${config('bundles.client.webPath')}`
                   : // Otherwise we just use the configured web path for the client.
-                  config('bundles.client.webPath'),
+                    config('bundles.client.webPath'),
                 // We only emit files when building a web bundle, for the server
                 // bundle we only care about the file loader being able to create
                 // the correct asset URLs.