Upgrade to Webpack 4

- Node 4 is no longer supported
- package.json "engines" and babel-preset-env target are now Node 6.11.5,
  as per webpack
- The new mode option is now set to activate new webpack defaults
- Remove manual usage of plugins which are included by default per mode
  - ModuleConcatenationPlugin is auto in production mode
  - NamedModulesPlugin is auto in development mode
- Use optimization.noEmitOnErrors instead of NoEmitOnErrorsPlugin
- Use optimization.minimize/optimization.minimizer for UglifyJS
- Use optimization.runtimeChunk to create a 'runtime' bundle
- Use optimization.splitChunks to create a vendor bundle instead of
  CommonsChunkPlugin, which was removed
- Use the new .hooks plugin API for StatusPlugin and InlineRuntimePlugin
- Use MiniCssExtractPlugin instead of ExtractTextPlugin
  - Separate CSS files are now extracted for code splits
  - Replaced webpack.extractText config with webpack.extractCSS config -
    this is not backwards-compatible, as plugin options differ
- Update config for silencing newer versions of webpack-dev-middleware
- Removed webpack.hoisting config, as use of ModuleConcatenationPlugin is
  now controlled via optimization.concatenateModules
- Disable performance hints (for now)
- Add a temporary context workaround for loaders which haven't migrated
  yet

.travis.yml

@@ -2,7 +2,6 @@ sudo: false
 
 language: node_js
 node_js:
-  - 4
   - 6
   - 8
 

README.md

@@ -28,8 +28,6 @@ Installing globally provides an `nwb` command for quick development and working
 npm install -g nwb
 ```
 
-> Using **npm >= 3 is recommended**, as Babel takes significantly more time and disk space to install with npm 2 due to its lack of deduplication.
-
 > **Note:** if you're using npm 5 and getting an `EACCES: permission denied` error from nwb's PhantomJS dependency while installing globally, try passing an `--unsafe-perm` flag:
 >
 > `npm install -g --unsafe-perm nwb`

docs/Configuration.md

@@ -89,7 +89,7 @@ The configuration object can include the following properties:
   - [`webpack.copy`](#copy-array--object) - patterns and options for `CopyWebpackPlugin`
   - [`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--false) - configure use of `ExtractTextPlugin`
+  - [`webpack.extractCSS`](#extractCSS-object--false) - configure use of `MiniCssExtractPlugin`
   - [`webpack.hoisting`](#hoisting-boolean) - enable partial scope hoisting with Webpack 3's `ModuleConcatenationPlugin`
   - [`webpack.html`](#html-object) - options for `HtmlPlugin`
   - [`webpack.install`](#install-object) - options for `NpmInstallPlugin`
@@ -525,20 +525,19 @@ module.exports = {
 }
 ```
 
-##### `extractText`: `Object | false`
+##### `extractCSS`: `Object | false`
 
-Configures [`ExtractWebpackPlugin` options](https://github.com/webpack-contrib/extract-text-webpack-plugin#options).
+Configures [`MiniCssExtractPlugin` options](https://github.com/webpack-contrib/mini-css-extract-plugin#configuration).
 
-By default, nwb uses [`ExtractTextWebpackPlugin`](https://github.com/webpack-contrib/extract-text-webpack-plugin#readme) to extract imported stylesheets into `.css` files when creating a build.
+By default, nwb uses [`MiniCssExtractPlugin`](https://github.com/webpack-contrib/mini-css-extract-plugin#readme) to extract imported stylesheets into `.css` files when creating a build.
 
-Default configuration is to extract stylesheets from all chunks (which also avoids including the `style-loader` runtime in builds) and use a content hash in extracted filenames, equivalent to:
+Default configuration is to a chunk hash in extracted filenames, equivalent to:
 
 ```js
 module.exports = {
   webpack: {
-    extractText: {
-      allChunks: true,
-      filename: process.env.NODE_ENV === 'production' ? `[name].[contenthash:8].css` : '[name].css'
+    extractCSS: {
+      filename: process.env.NODE_ENV === 'production' ? `[name].[chunkhash:8].css` : '[name].css'
     }
   }
 }

flow-typed/libdefs.js

@@ -3,13 +3,14 @@ declare module 'case-sensitive-paths-webpack-plugin' {  declare module.exports:
 declare module 'chalk' {  declare module.exports: any;  }
 declare module 'copy-webpack-plugin' {  declare module.exports: any;  }
 declare module 'cross-spawn' {  declare module.exports: any;  }
-declare module 'extract-text-webpack-plugin' {  declare module.exports: any;  }
 declare module 'fs-extra' {  declare module.exports: any;  }
 declare module 'html-webpack-plugin' {  declare module.exports: any;  }
-declare module 'npm-install-webpack2-plugin' {  declare module.exports: any;  }
+declare module 'mini-css-extract-plugin' {  declare module.exports: any;  }
+declare module 'npm-install-webpack-plugin' {  declare module.exports: any;  }
 declare module 'ora' {  declare module.exports: any;  }
 declare module 'resolve' {  declare module.exports: any;  }
+declare module 'uglifyjs-webpack-plugin' {  declare module.exports: any;  }
+declare module 'webpack' {  declare module.exports: any;  }
 declare module 'webpack-dev-middleware' {  declare module.exports: any;  }
 declare module 'webpack-hot-middleware' {  declare module.exports: any;  }
 declare module 'webpack-merge' {  declare module.exports: any;  }
-declare module 'webpack' {  declare module.exports: any;  }

package.json

@@ -26,7 +26,7 @@
     "polyfills.js"
   ],
   "engines": {
-    "node": ">=4.8.0"
+    "node": ">=6.11.5"
   },
   "dependencies": {
     "chalk": "2.3.2",
@@ -38,13 +38,13 @@
     "filesize": "3.6.0",
     "fs-extra": "5.0.0",
     "gzip-size": "4.1.0",
-    "inquirer": "3.3.0",
+    "inquirer": "5.1.0",
     "minimist": "1.2.0",
     "ora": "2.0.0",
     "resolve": "1.5.0",
     "run-series": "1.1.4",
     "semver": "5.5.0",
-    "webpack-merge": "4.1.1",
+    "webpack-merge": "4.1.2",
 
     "babel-cli": "6.26.0",
     "babel-core": "6.26.0",
@@ -81,7 +81,7 @@
     "karma-mocha-reporter": "2.2.5",
     "karma-phantomjs-launcher": "1.0.4",
     "karma-sourcemap-loader": "0.3.7",
-    "karma-webpack": "2.0.9",
+    "karma-webpack": "2.0.13",
     "phantomjs-prebuilt": "2.1.16",
 
     "mocha": "5.0.4",
@@ -91,25 +91,25 @@
     "promise": "8.0.1",
     "whatwg-fetch": "2.0.3",
 
-    "webpack": "3.11.0",
+    "webpack": "4.1.1",
     "autoprefixer": "8.1.0",
-    "babel-loader": "7.1.2",
-    "case-sensitive-paths-webpack-plugin": "2.1.1",
-    "copy-webpack-plugin": "4.4.1",
-    "css-loader": "0.28.9",
+    "babel-loader": "7.1.4",
+    "case-sensitive-paths-webpack-plugin": "2.1.2",
+    "copy-webpack-plugin": "4.5.1",
+    "css-loader": "0.28.10",
     "eventsource-polyfill": "0.9.6",
-    "extract-text-webpack-plugin": "3.0.2",
-    "file-loader": "1.1.6",
-    "html-webpack-plugin": "2.30.1",
-    "npm-install-webpack2-plugin": "5.0.1",
+    "file-loader": "1.1.11",
+    "html-webpack-plugin": "3.0.6",
+    "mini-css-extract-plugin": "0.2.0",
+    "npm-install-webpack-plugin": "4.0.5",
     "opn": "5.2.0",
-    "postcss-loader": "2.1.0",
-    "style-loader": "0.20.2",
-    "uglifyjs-webpack-plugin": "1.2.0",
-    "url-loader": "0.6.2",
-    "webpack-dev-middleware": "1.12.2",
-    "webpack-dev-server": "2.9.7",
-    "webpack-hot-middleware": "2.21.0"
+    "postcss-loader": "2.1.1",
+    "style-loader": "0.20.3",
+    "uglifyjs-webpack-plugin": "1.2.2",
+    "url-loader": "1.0.1",
+    "webpack-dev-middleware": "3.0.1",
+    "webpack-dev-server": "3.1.1",
+    "webpack-hot-middleware": "2.21.2"
   },
   "devDependencies": {
     "babel-preset-flow": "6.23.0",
@@ -141,7 +141,7 @@
       ["env", {
         "loose": true,
         "targets": {
-          "node": 4
+          "node": "6.11.5"
         }
       }],
       "stage-2"

src/WebpackStatusPlugin.js

@@ -37,8 +37,8 @@ export default class StatusPlugin {
   }
 
   apply(compiler: Object) {
-    compiler.plugin('watch-run', this.watchRun)
-    compiler.plugin('done', this.done)
+    compiler.hooks.watchRun.tapAsync('StatusPlugin', this.watchRun)
+    compiler.hooks.done.tap('StatusPlugin', this.done)
   }
 
   clearConsole() {

src/config/webpack.js

@@ -14,8 +14,7 @@ export function processWebpackConfig({pluginConfig, report, userConfig}) {
     copy,
     debug,
     define,
-    extractText,
-    hoisting,
+    extractCSS,
     html,
     install,
     publicPath,
@@ -186,29 +185,18 @@ export function processWebpackConfig({pluginConfig, report, userConfig}) {
     }
   }
 
-  // extractText
-  if ('extractText' in userConfig.webpack) {
-    let configType = typeOf(extractText)
+  // extractCSS
+  if ('extractCSS' in userConfig.webpack) {
+    let configType = typeOf(extractCSS)
     let help = `Must be ${chalk.cyan('false')} (to disable CSS extraction) or ` +
-               `an ${chalk.cyan('Object')} (to configure ExtractTextPlugin)`
+               `an ${chalk.cyan('Object')} (to configure MiniCssExtractPlugin)`
     if (configType === 'boolean') {
-      if (extractText !== false) {
-        report.error('webpack.extractText', extractText, help)
+      if (extractCSS !== false) {
+        report.error('webpack.extractCSS', extractCSS, help)
       }
     }
     else if (configType !== 'object') {
-      report.error('webpack.extractText', `type: ${configType}`, help)
-    }
-  }
-
-  // hoisting
-  if ('hoisting' in userConfig.webpack) {
-    if (typeOf(hoisting) !== 'boolean') {
-      report.error(
-        'webpack.hoisting',
-        `type: ${typeOf(hoisting)}`,
-        `Must be a ${chalk.cyan('Boolean')}`
-      )
+      report.error('webpack.extractCSS', `type: ${configType}`, help)
     }
   }
 

src/createKarmaConfig.js

@@ -204,6 +204,9 @@ export default function createKarmaConfig(args, buildConfig, pluginConfig, userC
       },
     }), pluginConfig, userConfig),
     webpackMiddleware: {
+      // These options are for webpack-dev-middleware 1.x, they should be
+      // replaced with logLevel: 'silent' if/when karma-webpack upgrades the
+      // version it uses.
       noInfo: true,
       quiet: true,
     },