feat: (wip) upgrade to webpack 4

Author: yyx990803

packages/@vue/cli-plugin-typescript/package.json

@@ -25,7 +25,7 @@
     "@types/node": "^9.3.0",
     "fork-ts-checker-webpack-plugin": "^0.4.0",
     "globby": "^8.0.1",
-    "ts-loader": "^3.4.0",
+    "ts-loader": "^4.0.1",
     "tslint": "^5.9.1",
     "typescript": "^2.7.2"
   },

packages/@vue/cli-service/lib/Service.js

@@ -8,6 +8,7 @@ const Config = require('webpack-chain')
 const PluginAPI = require('./PluginAPI')
 const loadEnv = require('./util/loadEnv')
 const defaultsDeep = require('lodash.defaultsdeep')
+const ChainedMap = require('webpack-chain/src/ChainedMap')
 const { warn, error, isPlugin } = require('@vue/cli-shared-utils')
 
 const { defaults, validate } = require('./options')
@@ -131,6 +132,16 @@ module.exports = class Service {
 
   resolveChainableWebpackConfig () {
     const chainableConfig = new Config()
+
+    // temporary patch for new option "optimization" for wepback 4
+    chainableConfig.optimization = new ChainedMap(chainableConfig)
+    const toConfig = chainableConfig.toConfig
+    chainableConfig.toConfig = function () {
+      const res = toConfig.call(this)
+      res.optimization = this.optimization.entries()
+      return res
+    }
+
     // apply chains
     this.webpackChainFns.forEach(fn => fn(chainableConfig))
     return chainableConfig

packages/@vue/cli-service/lib/config/app.js

@@ -7,23 +7,6 @@ module.exports = (api, options) => {
       return
     }
 
-    // inject preload/prefetch to HTML
-    const PreloadPlugin = require('../webpack/PreloadPlugin')
-    webpackConfig
-      .plugin('preload')
-        .use(PreloadPlugin, [{
-          rel: 'preload',
-          include: 'initial',
-          fileBlacklist: [/\.map$/, /hot-update\.js$/]
-        }])
-
-    webpackConfig
-      .plugin('prefetch')
-        .use(PreloadPlugin, [{
-          rel: 'prefetch',
-          include: 'asyncChunks'
-        }])
-
     // HTML plugin
     const fs = require('fs')
     const htmlPath = api.resolve('public/index.html')
@@ -38,7 +21,33 @@ module.exports = (api, options) => {
           )
         ])
 
+    // copy static assets in public/
+    webpackConfig
+      .plugin('copy')
+        .use(require('copy-webpack-plugin'), [[{
+          from: api.resolve('public'),
+          to: api.resolve(options.outputDir),
+          ignore: ['index.html', '.DS_Store']
+        }]])
+
     if (process.env.NODE_ENV === 'production') {
+      // inject preload/prefetch to HTML
+      const PreloadPlugin = require('../webpack/PreloadPlugin')
+      webpackConfig
+        .plugin('preload')
+          .use(PreloadPlugin, [{
+            rel: 'preload',
+            include: 'initial',
+            fileBlacklist: [/\.map$/, /hot-update\.js$/]
+          }])
+
+      webpackConfig
+        .plugin('prefetch')
+          .use(PreloadPlugin, [{
+            rel: 'prefetch',
+            include: 'asyncChunks'
+          }])
+
       // minify HTML
       webpackConfig
         .plugin('html')
@@ -54,64 +63,33 @@ module.exports = (api, options) => {
             chunksSortMode: 'dependency'
           })])
 
-      // Code splitting configs for better long-term caching
-      // This needs to be updated when upgrading to webpack 4
-      const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin')
+      // // Code splitting configs for better long-term caching
+      // // This needs to be updated when upgrading to webpack 4
+      // const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin')
 
       if (!options.dll) {
-        // extract vendor libs into its own chunk for better caching, since they
-        // are more likely to stay the same.
-        webpackConfig
-          .plugin('split-vendor')
-            .use(CommonsChunkPlugin, [{
-              name: 'vendor',
-              minChunks (module) {
-                // any required modules inside node_modules are extracted to vendor
-                return (
-                  module.resource &&
-                  /\.js$/.test(module.resource) &&
-                  module.resource.indexOf(`node_modules`) > -1
-                )
-              }
-            }])
-
-        // extract webpack runtime and module manifest to its own file in order to
-        // prevent vendor hash from being updated whenever app bundle is updated
-        webpackConfig
-          .plugin('split-manifest')
-            .use(CommonsChunkPlugin, [{
-              name: 'manifest',
-              minChunks: Infinity
-            }])
+        webpackConfig.optimization
+          .set('runtimeChunk', true)
+          .set('splitChunks', {
+            chunks: 'all'
+          })
 
         // inline the manifest chunk into HTML
         webpackConfig
           .plugin('inline-manifest')
             .use(require('../webpack/InlineSourcePlugin'), [{
-              include: /manifest\..*\.js$/
+              include: /runtime~.*\.js$/
             }])
 
         // since manifest is inlined, don't preload it anymore
         webpackConfig
           .plugin('preload')
             .tap(([options]) => {
-              options.fileBlacklist.push(/manifest\..*\.js$/)
+              options.fileBlacklist.push(/runtime~.*\.js$/)
               return [options]
             })
       }
 
-      // This CommonsChunkPlugin instance extracts shared chunks from async
-      // chunks and bundles them in a separate chunk, similar to the vendor chunk
-      // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
-      webpackConfig
-        .plugin('split-vendor-async')
-          .use(CommonsChunkPlugin, [{
-            name: 'app',
-            async: 'vendor-async',
-            children: true,
-            minChunks: 3
-          }])
-
       // DLL
       if (options.dll) {
         const webpack = require('webpack')
@@ -142,15 +120,6 @@ module.exports = (api, options) => {
             }])
             .after('preload')
       }
-
-      // copy static assets in public/
-      webpackConfig
-        .plugin('copy')
-          .use(require('copy-webpack-plugin'), [[{
-            from: api.resolve('public'),
-            to: api.resolve(options.outputDir),
-            ignore: ['index.html', '.DS_Store']
-          }]])
     }
   })
 }

packages/@vue/cli-service/lib/config/base.js

@@ -3,6 +3,9 @@ module.exports = (api, options) => {
     const resolveLocal = require('../util/resolveLocal')
     const inlineLimit = 10000
 
+    webpackConfig
+      .set('mode', 'development')
+
     webpackConfig
       .context(api.service.context)
       .entry('app')

packages/@vue/cli-service/lib/config/css.js

@@ -101,6 +101,8 @@ module.exports = (api, options) => {
       })
     }
 
+    // TODO: this is emitting useless css chunks with webpack 4 + async chunks
+
     // inject CSS extraction plugin
     if (extract) {
       const userOptions = options.extractCSS && typeof options.extractCSS === 'object'
@@ -113,8 +115,5 @@ module.exports = (api, options) => {
             allChunks: true
           }, userOptions)])
     }
-
-    // TODO document receipe for using css.loaderOptions to add `data` option
-    // to sass-loader
   })
 }

packages/@vue/cli-service/lib/config/dev.js

@@ -10,20 +10,16 @@ module.exports = api => {
         .plugin('hmr')
           .use(require('webpack/lib/HotModuleReplacementPlugin'))
 
-      webpackConfig
-        .plugin('named-modules')
-          .use(require('webpack/lib/NamedModulesPlugin'))
-
       webpackConfig
         .plugin('no-emit-on-errors')
           .use(require('webpack/lib/NoEmitOnErrorsPlugin'))
 
-      webpackConfig
-        .plugin('watch-missing')
-          .use(
-            require('../webpack/WatchMissingNodeModulesPlugin'),
-            [api.resolve('node_modules')]
-          )
+      // webpackConfig
+      //   .plugin('watch-missing')
+      //     .use(
+      //       require('../webpack/WatchMissingNodeModulesPlugin'),
+      //       [api.resolve('node_modules')]
+      //     )
     }
   })
 }

packages/@vue/cli-service/lib/config/prod.js

@@ -1,6 +1,9 @@
 module.exports = (api, options) => {
   api.chainWebpack(webpackConfig => {
     if (process.env.NODE_ENV === 'production') {
+      webpackConfig
+        .set('mode', 'production')
+
       webpackConfig
         .devtool('source-map')
         .output
@@ -12,11 +15,6 @@ module.exports = (api, options) => {
         .plugin('hash-module-ids')
           .use(require('webpack/lib/HashedModuleIdsPlugin'))
 
-      // enable scope hoisting / tree shaking
-      webpackConfig
-        .plugin('module-concatenation')
-          .use(require('webpack/lib/optimize/ModuleConcatenationPlugin'))
-
       // optimize CSS (dedupe)
       webpackConfig
         .plugin('optimize-css')
@@ -27,14 +25,17 @@ module.exports = (api, options) => {
           }])
 
       // minify JS
-      const UglifyPlugin = require('uglifyjs-webpack-plugin')
-      const getUglifyOptions = require('./uglifyOptions')
-      // disable during tests to speed things up
-      if (!process.env.VUE_CLI_TEST) {
-        webpackConfig
-          .plugin('uglify')
-            .use(UglifyPlugin, [getUglifyOptions(options)])
-      }
+      webpackConfig.optimization.set('minimizer', [{
+        apply: compiler => {
+          // disable during tests to speed things up
+          if (process.env.VUE_CLI_TEST) {
+            return
+          }
+          const UglifyPlugin = require('uglifyjs-webpack-plugin')
+          const getUglifyOptions = require('./uglifyOptions')
+          new UglifyPlugin(getUglifyOptions(options)).apply(compiler)
+        }
+      }])
     }
   })
 }

packages/@vue/cli-service/lib/webpack/InlineSourcePlugin.js

@@ -18,17 +18,13 @@ module.exports = class InlineSourcePlugin {
 
   apply (compiler) {
     // Hook into the html-webpack-plugin processing
-    compiler.plugin('compilation', compilation => {
-      compilation.plugin('html-webpack-plugin-before-html-generation', (htmlPluginData, callback) => {
-        callback(null, htmlPluginData)
-      })
-      compilation.plugin('html-webpack-plugin-alter-asset-tags', (htmlPluginData, callback) => {
+    compiler.hooks.compilation.tap('InlineSourcePlugin', compilation => {
+      compilation.hooks.htmlWebpackPluginAlterAssetTags.tap('InlineSourcePlugin', htmlPluginData => {
         if (!this.options.include) {
-          return callback(null, htmlPluginData)
+          return htmlPluginData
         }
         const regex = this.options.include
-        const result = this.processTags(compilation, regex, htmlPluginData)
-        callback(null, result)
+        return this.processTags(compilation, regex, htmlPluginData)
       })
     })
   }

packages/@vue/cli-service/lib/webpack/PreloadPlugin.js

@@ -34,11 +34,14 @@ const doesChunkBelongToHTML = (chunk, roots, visitedChunks) => {
     }
   }
 
-  for (const parent of chunk.parents) {
-    if (doesChunkBelongToHTML(parent, roots, visitedChunks)) {
-      return true
-    }
-  }
+  // TODO: this does not work with webpack 4
+  // also prefetch doesn't seem to work at all
+
+  // for (const parent of chunk.parents) {
+  //   if (doesChunkBelongToHTML(parent, roots, visitedChunks)) {
+  //     return true
+  //   }
+  // }
 
   return false
 }
@@ -56,20 +59,19 @@ module.exports = class PreloadPlugin {
 
   apply (compiler) {
     const options = this.options
-    compiler.plugin('compilation', compilation => {
+    compiler.hooks.compilation.tap('PreloadPlugin', compilation => {
       // Auto DLL plugin injects assets by mutating html plugin data, so the only
       // way to get a hold of those is by saving the pre-mutated assets and
       // comparing them later.
       let originalAssets
-      compilation.plugin('html-webpack-plugin-before-html-generation', (htmlPluginData, cb) => {
+      compilation.hooks.htmlWebpackPluginBeforeHtmlGeneration.tap('PreloadPlugin', htmlPluginData => {
         originalAssets = [
           ...htmlPluginData.assets.js,
           ...htmlPluginData.assets.css
         ]
-        cb(null, htmlPluginData)
       })
 
-      compilation.plugin('html-webpack-plugin-before-html-processing', (htmlPluginData, cb) => {
+      compilation.hooks.htmlWebpackPluginBeforeHtmlProcessing.tap('PreloadPlugin', htmlPluginData => {
         let filesToInclude = ''
         let extractedChunks = []
         // 'asyncChunks' are chunks intended for lazy/async loading usually generated as
@@ -78,13 +80,13 @@ module.exports = class PreloadPlugin {
         // configured to preload all types of chunks or just prefetch chunks as needed.
         if (options.include === undefined || options.include === 'asyncChunks') {
           try {
-            extractedChunks = compilation.chunks.filter(chunk => !chunk.isInitial())
+            extractedChunks = compilation.chunks.filter(chunk => !chunk.isOnlyInitial())
           } catch (e) {
             extractedChunks = compilation.chunks
           }
         } else if (options.include === 'initial') {
           try {
-            extractedChunks = compilation.chunks.filter(chunk => chunk.isInitial())
+            extractedChunks = compilation.chunks.filter(chunk => chunk.isOnlyInitial())
           } catch (e) {
             extractedChunks = compilation.chunks
           }
@@ -155,7 +157,7 @@ module.exports = class PreloadPlugin {
           // Otherwise assume at least a <body> is present and update it to include a new <head>
           htmlPluginData.html = htmlPluginData.html.replace('<body>', '<head>' + filesToInclude + '</head><body>')
         }
-        cb(null, htmlPluginData)
+        return htmlPluginData
       })
     })
   }

packages/@vue/cli-service/lib/webpack/TimeFixPlugin.js

@@ -4,12 +4,11 @@ module.exports = class TimeFixPlugin {
   }
 
   apply (compiler) {
-    compiler.plugin('watch-run', (watching, callback) => {
+    compiler.hooks.watchRun.tap('TimeFixPlugin', watching => {
       watching.startTime += this.timefix
-      callback()
     })
 
-    compiler.plugin('done', stats => {
+    compiler.hooks.done.tap('TimeFixPlugin', stats => {
       stats.startTime -= this.timefix
     })
   }