Update dependencies

Update inlineRuntimePlugin to use the new html-webpack-plugin v4 hooks API

Author: insin

CHANGES.md

@@ -1,3 +1,21 @@
+# Unreleased (in `master`)
+
+## Changed
+
+- [html-webpack-plugin got a major version bump to v4](https://dev.to/jantimon/html-webpack-plugin-4-has-been-released-125d)
+  - Output HTML is now minified by default - you can disable this by configuring `html.minification = false`.
+  - Chunk sorting was removed, but it seems to work as before for the ordering of the JavaScript files generated by nwb's build.
+  - The plugin nwb uses to inline the webpack runtime chunk was rewritten to use v4's new hooks.
+
+## Dependencies
+
+- @babel/plugin-transform-react-jsx: v7.9.1 → [v7.9.4](https://github.com/babel/babel/releases/tag/v7.9.4)
+- @babel/preset-react: v7.9.1 → [v7.9.4](https://github.com/babel/babel/releases/tag/v7.9.4)
+- @babel/runtime: v7.9.0 → v7.9.2
+- autoprefixer: v9.7.4 → [v9.7.5](https://github.com/postcss/autoprefixer/blob/master/CHANGELOG.md#975)
+- html-webpack-plugin: v3.2.0 → [v4.0.1](https://github.com/jantimon/html-webpack-plugin/blob/master/CHANGELOG.md#401-2020-03-23)
+- webpack: v4.42.0 → [v4.42.1](https://github.com/webpack/webpack/releases/tag/v4.42.1)
+
 # 0.24.4 / 2020-03-21
 
 ## Added

package.json

@@ -51,12 +51,12 @@
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
     "@babel/plugin-syntax-jsx": "7.8.3",
     "@babel/plugin-transform-react-constant-elements": "7.9.0",
-    "@babel/plugin-transform-react-jsx": "7.9.1",
+    "@babel/plugin-transform-react-jsx": "7.9.4",
     "@babel/plugin-transform-runtime": "7.9.0",
     "@babel/polyfill": "7.8.7",
     "@babel/preset-env": "7.9.0",
-    "@babel/preset-react": "7.9.1",
-    "@babel/runtime": "7.9.0",
+    "@babel/preset-react": "7.9.4",
+    "@babel/runtime": "7.9.2",
     "@pmmmwh/react-refresh-webpack-plugin": "0.2.0",
     "babel-plugin-add-module-exports": "1.0.2",
     "babel-plugin-inferno": "6.1.0",
@@ -84,15 +84,15 @@
     "promise": "8.1.0",
     "whatwg-fetch": "3.0.0",
 
-    "webpack": "4.42.0",
-    "autoprefixer": "9.7.4",
+    "webpack": "4.42.1",
+    "autoprefixer": "9.7.5",
     "babel-loader": "8.1.0",
     "case-sensitive-paths-webpack-plugin": "2.3.0",
     "copy-webpack-plugin": "5.1.1",
     "css-loader": "3.4.2",
     "eventsource-polyfill": "0.9.6",
     "file-loader": "4.3.0",
-    "html-webpack-plugin": "3.2.0",
+    "html-webpack-plugin": "4.0.1",
     "mini-css-extract-plugin": "0.9.0",
     "@insin/npm-install-webpack-plugin": "5.0.0",
     "optimize-css-assets-webpack-plugin": "5.0.3",

src/createWebpackConfig.js

@@ -409,25 +409,18 @@ export function createExtraRules(
 
 /**
  * Plugin for HtmlPlugin which inlines the Webpack runtime code and chunk
- * manifest into the HTML in a <script> tag before other emitted asssets are
- * injected by HtmlPlugin itself.
+ * manifest into its <script> tag.
  */
 function inlineRuntimePlugin() {
   this.hooks.compilation.tap('inlineRuntimePlugin', compilation => {
-    compilation.hooks.htmlWebpackPluginBeforeHtmlProcessing.tapAsync('inlineRuntimePlugin', (data, cb) => {
-      Object.keys(compilation.assets).forEach(key => {
-        if (!/^runtime\.[a-z\d]+\.js$/.test(key)) return
-        let {children} = compilation.assets[key]
+    HtmlPlugin.getHooks(compilation).alterAssetTags.tapAsync('inlineRuntimePlugin', (data, cb) => {
+      Object.keys(compilation.assets).forEach(assetName => {
+        if (!/^runtime\.[a-z\d]+\.js$/.test(assetName)) return
+        let {children} = compilation.assets[assetName]
         if (children && children[0]) {
-          data.html = data.html.replace(
-            /^(\s*)<\/body>/m,
-            `$1<script>${children[0]._value}</script>\n$1</body>`
-          )
-          // Remove the runtime from HtmlPlugin's assets to prevent a <script>
-          // tag being created for it.
-          var runtimeIndex = data.assets.js.indexOf(data.assets.publicPath + key)
-          data.assets.js.splice(runtimeIndex, 1)
-          delete data.assets.chunks.runtime
+          let tag = data.assetTags.scripts.find(tag => tag.attributes.src.endsWith(assetName))
+          delete tag.attributes.src
+          tag.innerHTML = children[0]._value
         }
       })
       cb(null, data)
@@ -557,7 +550,6 @@ export function createPlugins(
   // Generate an HTML file for web apps which pulls in generated resources
   if (buildConfig.html) {
     plugins.push(new HtmlPlugin({
-      chunksSortMode: 'dependency',
       template: path.join(__dirname, '../templates/webpack-template.html'),
       ...buildConfig.html,
       ...userConfig.html,