Always enabling the "named" plugins in dev to help with HMR debugging

Author: weaverryan

lib/config-generator.js

@@ -320,20 +320,26 @@ class ConfigGenerator {
          *  * https://github.com/webpack/webpack.js.org/issues/652#issuecomment-273324529
          *  * https://webpack.js.org/guides/caching/#deterministic-hashes
          */
-        // when not using versioning, none of this is important
-        if (this.webpackConfig.useVersioning) {
-            let moduleNamePlugin;
-            if (this.webpackConfig.isProduction()) {
+        let moduleNamePlugin;
+        if (this.webpackConfig.isProduction()) {
+            // only enable if versioning is on, as it makes the assets *slightly* larger
+            if (this.webpackConfig.useVersioning) {
                 // shorter, and obfuscated module ids
                 moduleNamePlugin = new webpack.HashedModuleIdsPlugin();
-            } else {
-                // human-readable module names, helps debug in HMR
-                moduleNamePlugin = new webpack.NamedModulesPlugin();
             }
-            plugins = plugins.concat([
-                moduleNamePlugin,
-                new WebpackChunkHash()
-            ]);
+        } else {
+            // human-readable module names, helps debug in HMR
+            // enable always when ! production for consistency
+            moduleNamePlugin = new webpack.NamedModulesPlugin();
+        }
+
+        if (moduleNamePlugin) {
+            plugins.push(moduleNamePlugin);
+        }
+
+        if (this.webpackConfig.useVersioning) {
+            // enables the [chunkhash] ability
+            plugins.push(new WebpackChunkHash());
         }
 
         if (Object.keys(this.webpackConfig.providedVariables).length > 0) {

test/config-generator.js

@@ -458,6 +458,7 @@ describe('The config-generator function', () => {
             const config = createConfig();
             config.runtimeConfig.useDevServer = true;
             config.runtimeConfig.devServerUrl = 'http://localhost:8080/';
+            config.runtimeConfig.useHotModuleReplacement = false;
             config.outputPath = '/tmp/public/build';
             config.setPublicPath('/build/');
             config.addEntry('main', './main');
@@ -467,6 +468,7 @@ describe('The config-generator function', () => {
             // is calculated as outputPath, but without the publicPath portion
             expect(actualConfig.devServer.contentBase).to.equal('/tmp/public');
             expect(actualConfig.devServer.publicPath).to.equal('/build/');
+            expect(actualConfig.devServer.hot).to.be.false;
 
         });
 
@@ -486,5 +488,18 @@ describe('The config-generator function', () => {
             expect(actualConfig.devServer.contentBase).to.equal('/tmp/public');
             expect(actualConfig.devServer.publicPath).to.equal('/subdirectory/build/');
         });
+
+        it('hot mode', () => {
+            const config = createConfig();
+            config.runtimeConfig.useDevServer = true;
+            config.runtimeConfig.devServerUrl = 'http://localhost:8080/';
+            config.runtimeConfig.useHotModuleReplacement = true;
+            config.publicPath = '/';
+            config.outputPath = '/tmp';
+            config.addEntry('main', './main');
+
+            const actualConfig = configGenerator(config);
+            expect(actualConfig.devServer.hot).to.be.true;
+        });
     });
 });