fix: pwa plugin compat with webpack 4

Author: yyx990803

packages/@vue/cli-plugin-pwa/__tests__/pwaPlugin.spec.js

@@ -28,17 +28,17 @@ test('pwa', async () => {
 
   // Make sure the base preload/prefetch are not affected
   const index = await project.read('dist/index.html')
+
   // should split and preload app.js & vendor.js
-  expect(index).toMatch(/<link rel=preload [^>]+app[^>]+\.js>/)
-  expect(index).toMatch(/<link rel=preload [^>]+vendor[^>]+\.js>/)
-  // should not preload manifest because it's inlined
-  expect(index).not.toMatch(/<link rel=preload [^>]+manifest[^>]+\.js>/)
-  // should inline manifest and webpack runtime
-  expect(index).toMatch('webpackJsonp')
+  expect(index).toMatch(/<link [^>]+js\/app[^>]+\.js rel=preload>/)
+  expect(index).toMatch(/<link [^>]+js\/vendors~app[^>]+\.js rel=preload>/)
+  // should preload css
+  expect(index).toMatch(/<link [^>]+app[^>]+\.css rel=preload>/)
 
   // PWA specific directives
   expect(index).toMatch(`<link rel=manifest href=/manifest.json>`)
-  expect(index).toMatch(`<!--[if IE]><link rel="shortcut icon" href="/favicon.ico"><![endif]-->`)
+  // favicon is not minified because it's technically a comment
+  expect(index).toMatch(`<!--[if IE]><link rel="icon" href="/favicon.ico"><![endif]-->`)
   expect(index).toMatch(`<meta name=apple-mobile-web-app-capable content=no>`)
 
   // should import service worker script

packages/@vue/cli-plugin-pwa/index.js

@@ -10,6 +10,7 @@ module.exports = (api, options) => {
         .use(require('./lib/HtmlPwaPlugin'), [Object.assign({
           name
         }, userOptions)])
+        .after('html')
 
     // generate /service-worker.js in production mode
     if (process.env.NODE_ENV === 'production') {

packages/@vue/cli-plugin-pwa/lib/HtmlPwaPlugin.js

@@ -1,3 +1,5 @@
+const ID = 'vue-cli:pwa-html-plugin'
+
 const defaults = {
   name: 'PWA app',
   themeColor: '#4DBA87', // The Vue color
@@ -12,14 +14,14 @@ module.exports = class HtmlPwaPlugin {
   }
 
   apply (compiler) {
-    compiler.plugin('compilation', compilation => {
-      compilation.plugin('html-webpack-plugin-before-html-processing', (data, cb) => {
+    compiler.hooks.compilation.tap(ID, compilation => {
+      compilation.hooks.htmlWebpackPluginBeforeHtmlProcessing.tapAsync(ID, (data, cb) => {
         // wrap favicon in the base template with IE only comment
-        data.html = data.html.replace(/<link rel="shortcut icon"[^>]+>/, '<!--[if IE]>$&<![endif]-->')
+        data.html = data.html.replace(/<link rel="icon"[^>]+>/, '<!--[if IE]>$&<![endif]-->')
         cb(null, data)
       })
 
-      compilation.plugin('html-webpack-plugin-alter-asset-tags', (data, cb) => {
+      compilation.hooks.htmlWebpackPluginAlterAssetTags.tapAsync(ID, (data, cb) => {
         const { name, themeColor, msTileColor, appleMobileWebAppCapable, appleMobileWebAppStatusBarStyle } = this.options
         const { publicPath } = compiler.options.output