feature #21 Use NamedModulesPlugin for HMR debugging (weaverryan)

This PR was squashed before being merged into the master branch (closes #21).

Discussion
----------

Use NamedModulesPlugin for HMR debugging

When using HMR, the name of your module shows up in the console. By default, since numbers are used, it looks like:

```
[HMR] Updated modules:
[HMR]  - 21
[HMR]  - 241
```

After:

```
[HMR] Updated modules:
[HMR]  - ./node_modules/css-loader/index.js?sourceMap!./node_modules/vue-loader/lib/style-compiler/index.js?{"vue":true,"id":"data-v-504ecf1c","scoped":true,"hasInlineConfig":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./app/Resources/assets/vuejs/components/Hello.vue
[HMR]  - ./node_modules/style-loader/addStyles.js
```

... which at least makes a bit more sense :).

This adds a bit more logic:

1) In dev, always add `NamedModulesPlugin`. We actually only need this if you're using HMR... but I don't think there's a disadvantage of including it always, so I've done it to try to keep the dev environment as consistent as possible with itself.

2) In prod, we *only* add `HashedModuleIdsPlugin` when versioning is enabled. We could at it always (for consistency), but it slightly increases the size of the built assets, because the module ids are longer.

3) Enable `WebpackChunkHash` only when versioning is used, because it's the only time we use the `[chunkhash]`

Commits
-------

a0ee75d Use NamedModulesPlugin for HMR debugging

Author: weaverryan

lib/config-generator.js

@@ -243,20 +243,20 @@ 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.isProduction()) {
+            // shorter, and obfuscated module ids (versus NamedModulesPlugin)
+            // makes the final assets *slightly* larger, but prevents contents
+            // from sometimes changing when nothing really changed
+            plugins.push(new webpack.HashedModuleIdsPlugin());
+        } else {
+            // human-readable module names, helps debug in HMR
+            // enable always when not in production for consistency
+            plugins.push(new webpack.NamedModulesPlugin());
+        }
+
         if (this.webpackConfig.useVersioning) {
-            let moduleNamePlugin;
-            if (this.webpackConfig.isProduction()) {
-                // 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()
-            ]);
+            // enables the [chunkhash] ability
+            plugins.push(new WebpackChunkHash());
         }
 
         if (Object.keys(this.webpackConfig.providedVariables).length > 0) {

lib/config/path-util.js

@@ -41,11 +41,12 @@ module.exports = {
         // eventually, you (may) get to the right path
         let contentBase = outputPath;
         while (path.dirname(contentBase) !== contentBase) {
-            contentBase = path.dirname(contentBase);
-
             if (path.join(contentBase, publicPath) === outputPath) {
                 return contentBase;
             }
+
+            // go up one directory
+            contentBase = path.dirname(contentBase);
         }
 
         throw new Error(`Unable to determine contentBase option for webpack's devServer configuration. The ${webpackConfig.manifestKeyPrefix ? 'manifestKeyPrefix' : 'publicPath'} (${webpackConfig.manifestKeyPrefix ? webpackConfig.manifestKeyPrefix : webpackConfig.publicPath}) string does not exist in the outputPath (${webpackConfig.outputPath}), and so the "document root" cannot be determined.`);

test/config-generator.js

@@ -18,6 +18,8 @@ const ManifestPlugin = require('./../lib/webpack/webpack-manifest-plugin');
 const CleanWebpackPlugin = require('clean-webpack-plugin');
 const webpack = require('webpack');
 
+const isWindows = (process.platform === 'win32');
+
 function createConfig(runtimeConfig = null) {
     runtimeConfig = runtimeConfig ? runtimeConfig : new RuntimeConfig();
 
@@ -236,7 +238,6 @@ describe('The config-generator function', () => {
             config.outputPath = '/tmp/output/public-path';
             config.publicPath = '/public-path';
             config.addEntry('main', './main');
-            config.enableVersioning(true);
 
             const actualConfig = configGenerator(config);
 
@@ -373,6 +374,33 @@ describe('The config-generator function', () => {
             const actualConfig = configGenerator(config);
             expect(actualConfig.devServer).to.be.undefined;
         });
+
+        it('devServer no hot mode', () => {
+            const config = createConfig();
+            config.runtimeConfig.useDevServer = true;
+            config.runtimeConfig.devServerUrl = 'http://localhost:8080/';
+            config.runtimeConfig.useHotModuleReplacement = false;
+            config.outputPath = isWindows ? 'C:\\tmp\\public' : '/tmp/public';
+            config.setPublicPath('/');
+            config.addEntry('main', './main');
+
+            const actualConfig = configGenerator(config);
+            expect(actualConfig.devServer).to.not.be.undefined;
+            expect(actualConfig.devServer.hot).to.be.false;
+        });
+
+        it('hot mode', () => {
+            const config = createConfig();
+            config.runtimeConfig.useDevServer = true;
+            config.runtimeConfig.devServerUrl = 'http://localhost:8080/';
+            config.runtimeConfig.useHotModuleReplacement = true;
+            config.outputPath = isWindows ? 'C:\\tmp\\public' : '/tmp/public';
+            config.setPublicPath('/');
+            config.addEntry('main', './main');
+
+            const actualConfig = configGenerator(config);
+            expect(actualConfig.devServer.hot).to.be.true;
+        });
     });
 
     describe('test for addPlugin config', () => {

test/config/path-util.js

@@ -55,6 +55,20 @@ describe('path-util getContentBase()', () => {
             const actualContentBase = pathUtil.getContentBase(config);
             expect(actualContentBase).to.equal(isWindows ? 'C:\\tmp\\public' : '/tmp/public');
         });
+
+        it('contentBase is calculated correctly with no public path', function() {
+            const config = createConfig();
+            config.runtimeConfig.useDevServer = true;
+            config.runtimeConfig.devServerUrl = 'http://localhost:8080/';
+            config.outputPath = isWindows ? 'C:\\tmp\\public' : '/tmp/public';
+            config.setPublicPath('/');
+            config.addEntry('main', './main');
+
+            const actualContentBase = pathUtil.getContentBase(config);
+            // contentBase should point to the "document root", which
+            // is calculated as outputPath, but without the publicPath portion
+            expect(actualContentBase).to.equal(isWindows ? 'C:\\tmp\\public' : '/tmp/public');
+        });
     });
 
     describe('validatePublicPathAndManifestKeyPrefix', () => {