Added webpack.debug config for a more debuggable production build

Closes #336

CHANGES.md

@@ -1,8 +1,16 @@
 ## Added
 
+- Added [`webpack.debug` config](https://github.com/insin/nwb/blob/master/docs/Configuration.md#debug-boolean) to trigger creation of a more debuggable production build [[#336](https://github.com/insin/nwb/issues/336)]
+
+  The recommended way to use this is via a [config argument](https://github.com/insin/nwb/blob/master/docs/Configuration.md#configuration-via-arguments):
+
+  ```sh
+  npm run build -- --webpack.debug
+  ```
+
 - Added support for the following arguments when building a React component's demo:
   - `--title` - set the generated demo `index.html`'s `<title>`
-  - `--vendor` - enable creation of a vendor bundle for modules imported from `node_modules/`
+  - `--vendor` - enable creation of a vendor bundle for modules imported from `node_modules/` [[#335](https://github.com/insin/nwb/issues/335)]
 
 ## Dependencies
 

docs/Configuration.md

@@ -84,6 +84,7 @@ The configuration object can include the following properties:
   - [`webpack.aliases`](#aliases-object) - rewrite certain import paths
   - [`webpack.autoprefixer`](#autoprefixer-string--object) - options for Autoprefixer
   - [`webpack.compat`](#compat-object) - enable Webpack compatibility tweaks for commonly-used modules
+  - [`webpack.debug`](#debug-boolean) - create a more debuggable production build
   - [`webpack.define`](#define-object) - options for `DefinePlugin`, for replacing certain expressions with values
   - [`webpack.extractText`](#extracttext-object) - options for `ExtractTextPlugin`
   - [`webpack.hoisting`](#hoisting-boolean) - enable partial scope hoisting with Webpack 3's `ModuleConcatenationPlugin`
@@ -430,6 +431,26 @@ module.exports = {
 }
 ```
 
+##### `debug`: `boolean`
+
+Enables a more debuggable production build:
+
+- code which would normally be removed from a production build is removed, but code is not compressed.
+- modules ids will be file system names rather than a generated hash.
+
+It's recommended that you toggle this on via a configuration argument so you don't forget to remove it later:
+
+```sh
+npm run build -- --webpack.debug
+```
+```sh
+nwb preact build app.js --webpack.debug
+```
+
+If you set `debug` in your config file, nwb will always display a hint to remind you to remove it later.
+
+> **Note:** if you've customised `UglifyJsPlugin` settings via [`webpack.uglify` config](#uglify-object--false), only `webpack.uglify.compress` will be used when a debug build is enabled.
+
 ##### `define`: `Object`
 
 By default, nwb will use Webpack's [`DefinePlugin`](https://webpack.js.org/plugins/define-plugin/) to replace all occurrences of `process.env.NODE_ENV` with a string containing `NODE_ENV`'s current value.

src/createWebpackConfig.js

@@ -36,6 +36,33 @@ type RuleConfig = {
 
 type RuleConfigFactory = (?string, RuleConfig) => ?RuleConfig;
 
+const DEFAULT_UGLIFY_CONFIG = {
+  compress: {
+    warnings: false,
+  },
+  output: {
+    comments: false,
+  },
+  sourceMap: true,
+}
+
+function createUglifyConfig(userPluginConfig) {
+  if (userPluginConfig.debug) {
+    return merge(
+      {...DEFAULT_UGLIFY_CONFIG, mangle: false},
+      // Preserve user 'compress' config if present, as it affects what gets
+      // removed from the production build.
+      typeof userPluginConfig.uglify === 'object' && 'compress' in userPluginConfig.uglify
+        ? {compress: userPluginConfig.uglify.compress}
+        : {}
+    )
+  }
+  return merge(
+    DEFAULT_UGLIFY_CONFIG,
+    typeof userPluginConfig.uglify === 'object' ? userPluginConfig.uglify : {}
+  )
+}
+
 /**
  * Merge webpack rule config objects.
  */
@@ -542,10 +569,12 @@ export function createPlugins(
     if (buildConfig.html) {
       plugins.push(
         // Generate stable module ids instead of having Webpack assign integers.
+        // NamedModulesPlugin allows for easier debugging and
         // HashedModuleIdsPlugin does this without adding too much to bundle
-        // size and NamedModulesPlugin allows for easier debugging of
-        // development builds.
-        development ? new webpack.NamedModulesPlugin() : new webpack.HashedModuleIdsPlugin(),
+        // size.
+        (development || userConfig.debug)
+          ? new webpack.NamedModulesPlugin()
+          : new webpack.HashedModuleIdsPlugin(),
         // The Webpack manifest is normally folded into the last chunk, changing
         // its hash - prevent this by extracting the manifest into its own
         // chunk - also essential for deterministic hashing.
@@ -562,15 +591,7 @@ export function createPlugins(
       minimize: true,
     }))
     if (userConfig.uglify !== false) {
-      plugins.push(new optimize.UglifyJsPlugin(merge({
-        compress: {
-          warnings: false,
-        },
-        output: {
-          comments: false,
-        },
-        sourceMap: true,
-      }, userConfig.uglify)))
+      plugins.push(new optimize.UglifyJsPlugin(createUglifyConfig(userConfig)))
     }
     // Use partial scope hoisting/module concatenation
     if (userConfig.hoisting) {

src/getUserConfig.js

@@ -242,6 +242,14 @@ export function processUserConfig({
     }
   })
 
+  // Make it harder for the user to forget to disable the production debug build
+  // if they've enabled it in the config file.
+  if (userConfig.webpack.debug) {
+    report.hint('webpack.debug',
+      "Don't forget to disable the debug build before building for production"
+    )
+  }
+
   if (Object.keys(argumentOverrides).length > 0) {
     debug('user config arguments: %s', deepToString(argumentOverrides))
     userConfig = replaceArrayMerge(userConfig, argumentOverrides)