refactor: move codebase to webpack 5 by default

Author: yyx990803

.circleci/config.yml

@@ -23,4 +23,4 @@ jobs:
 
       - run: yarn lint
       - run: yarn test
-      - run: yarn test:webpack5
+      - run: yarn test:webpack4

example/devServer.js

@@ -0,0 +1,17 @@
+// register proxy sub-paths
+if (process.env.WEBPACK4) {
+  console.log('using webpack 4...')
+  const Module = require('module')
+  const resolve = Module._resolveFilename
+  Module._resolveFilename = (request, ...rest) => {
+    if (request === 'webpack') {
+      return resolve('webpack4', ...rest)
+    }
+    if (request.startsWith('webpack/')) {
+      return resolve(request.replace(/^webpack\//, 'webpack4/'), ...rest)
+    }
+    return resolve(request, ...rest)
+  }
+}
+
+require('webpack-dev-server/bin/webpack-dev-server.js')

example/tsconfig.json

@@ -3,6 +3,8 @@ const webpack = require('webpack')
 const VueLoaderPlugin = require('../dist/plugin').default
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 
+console.log(webpack.version)
+
 module.exports = (env = {}) => {
   const isProd = env.prod
   const isSSR = env.ssr
@@ -28,6 +30,11 @@ module.exports = (env = {}) => {
       devtool: 'source-map',
       resolve: {
         extensions: ['.js', '.ts'],
+        alias: process.env.WEBPACK4
+          ? {
+              webpack: 'webpack4',
+            }
+          : {},
       },
       output: {
         path: path.resolve(
@@ -70,15 +77,7 @@ module.exports = (env = {}) => {
           },
           {
             test: /\.css$/,
-            use: [
-              {
-                loader: MiniCssExtractPlugin.loader,
-                options: {
-                  hmr: !isProd,
-                },
-              },
-              'css-loader',
-            ],
+            use: [MiniCssExtractPlugin.loader, 'css-loader'],
           },
           {
             test: /\.ts$/,
@@ -114,6 +113,7 @@ module.exports = (env = {}) => {
         minimize,
       },
       devServer: {
+        hot: true,
         stats: 'minimal',
         contentBase: __dirname,
         overlay: true,

example/webpack.config.js

@@ -1,24 +1,19 @@
-const config = {
+console.log(`running tests with webpack ${process.env.WEBPACK4 ? '4' : '5'}...`)
+
+module.exports = {
   preset: 'ts-jest',
   testTimeout: 60000,
   testEnvironment: 'node',
   testPathIgnorePatterns: ['<rootDir>/dist/', '<rootDir>/node_modules/'],
-}
-
-if (process.env.WEBPACK5) {
-  module.exports = {
-    ...config,
-
-    globals: {
-      'ts-jest': {
-        diagnostics: false,
-      },
-    },
-    moduleNameMapper: {
-      '^webpack$': 'webpack5',
-      '^webpack/(.*)': 'webpack5/$1',
+  globals: {
+    'ts-jest': {
+      diagnostics: false,
     },
-  }
-} else {
-  module.exports = config
+  },
+  moduleNameMapper: process.env.WEBPACK4
+    ? {
+        '^webpack$': 'webpack4',
+        '^webpack/(.*)': 'webpack4/$1',
+      }
+    : undefined,
 }

jest.config.js

@@ -13,9 +13,9 @@
     "dev": "tsc --watch",
     "build": "tsc",
     "pretest": "tsc",
-    "test": "jest --coverage",
-    "test:webpack5": "WEBPACK5=true jest -c --coverage",
-    "dev-example": "webpack-dev-server --config example/webpack.config.js --inline --hot",
+    "test": "jest",
+    "test:webpack4": "WEBPACK4=true jest",
+    "dev-example": "node example/devServer.js --config example/webpack.config.js --inline --hot",
     "build-example": "rm -rf example/dist && webpack --config example/webpack.config.js --env.prod",
     "build-example-ssr": "rm -rf example/dist-ssr && webpack --config example/webpack.config.js --env.prod --env.ssr && node example/ssr.js",
     "lint": "prettier --write --parser typescript \"{src,test}/**/*.{j,t}s\"",
@@ -56,9 +56,7 @@
     "@types/hash-sum": "^1.0.0",
     "@types/jest": "^26.0.13",
     "@types/jsdom": "^16.2.13",
-    "@types/loader-utils": "^2.0.1",
     "@types/mini-css-extract-plugin": "^0.9.1",
-    "@types/webpack": "^4.41.0",
     "@types/webpack-merge": "^4.1.5",
     "babel-loader": "^8.1.0",
     "cache-loader": "^4.1.0",
@@ -72,7 +70,7 @@
     "lint-staged": "^10.3.0",
     "markdown-loader": "^6.0.0",
     "memfs": "^3.1.2",
-    "mini-css-extract-plugin": "^0.11.2",
+    "mini-css-extract-plugin": "^1.6.2",
     "normalize-newline": "^3.0.0",
     "null-loader": "^4.0.1",
     "postcss-loader": "^4.0.4",
@@ -91,11 +89,11 @@
     "url-loader": "^4.1.0",
     "vue": "link:../core/packages/vue",
     "vue-i18n": "^9.1.7",
-    "webpack": "^4.46.0",
+    "webpack": "^5.79.0",
     "webpack-cli": "^3.3.12",
     "webpack-dev-server": "^3.11.3",
     "webpack-merge": "^5.1.4",
-    "webpack5": "npm:webpack@^5.0.0",
+    "webpack4": "npm:webpack@^4.46.0",
     "yorkie": "^2.0.0"
   }
 }

package.json

@@ -1,4 +1,4 @@
-import webpack = require('webpack')
+import type { LoaderContext } from 'webpack'
 import * as path from 'path'
 import * as qs from 'querystring'
 
@@ -47,7 +47,7 @@ const { parse } = compiler
 const exportHelperPath = JSON.stringify(require.resolve('./exportHelper'))
 
 export default function loader(
-  this: webpack.loader.LoaderContext,
+  this: LoaderContext<VueLoaderOptions>,
   source: string
 ) {
   const loaderContext = this
@@ -200,7 +200,9 @@ export default function loader(
         if (style.module) {
           if (asCustomElement) {
             loaderContext.emitError(
-              `<style module> is not supported in custom element mode.`
+              new Error(
+                `<style module> is not supported in custom element mode.`
+              )
             )
           }
           if (!hasCSSModules) {

src/index.ts

@@ -1,32 +1,28 @@
-import webpack = require('webpack')
+import type { LoaderDefinitionFunction, LoaderContext } from 'webpack'
 import * as qs from 'querystring'
 import { stringifyRequest } from './util'
+import { VueLoaderOptions } from '.'
 
 const selfPath = require.resolve('./index')
 // const templateLoaderPath = require.resolve('./templateLoader')
 const stylePostLoaderPath = require.resolve('./stylePostLoader')
 const styleInlineLoaderPath = require.resolve('./styleInlineLoader')
 
 // @types/webpack doesn't provide the typing for loaderContext.loaders...
-interface Loader {
-  request: string
-  path: string
-  query: string
-  pitchExecuted: boolean
-}
+type Loader = LoaderContext<VueLoaderOptions>['loaders'][number]
 
 const isESLintLoader = (l: Loader) => /(\/|\\|@)eslint-loader/.test(l.path)
 const isNullLoader = (l: Loader) => /(\/|\\|@)null-loader/.test(l.path)
 const isCSSLoader = (l: Loader) => /(\/|\\|@)css-loader/.test(l.path)
 const isCacheLoader = (l: Loader) => /(\/|\\|@)cache-loader/.test(l.path)
 const isNotPitcher = (l: Loader) => l.path !== __filename
 
-const pitcher: webpack.loader.Loader = (code) => code
+const pitcher: LoaderDefinitionFunction = (code) => code
 
 // This pitching loader is responsible for intercepting all vue block requests
 // and transform it into appropriate requests.
 export const pitch = function () {
-  const context = this as webpack.loader.LoaderContext
+  const context = this as LoaderContext<VueLoaderOptions>
   const rawLoaders = context.loaders.filter(isNotPitcher)
   let loaders = rawLoaders
 
@@ -92,8 +88,8 @@ export const pitch = function () {
 }
 
 function genProxyModule(
-  loaders: Loader[],
-  context: webpack.loader.LoaderContext,
+  loaders: (Loader | string)[],
+  context: LoaderContext<VueLoaderOptions>,
   exportDefault = true
 ) {
   const request = genRequest(loaders, context)
@@ -106,7 +102,10 @@ function genProxyModule(
   )
 }
 
-function genRequest(loaders: Loader[], context: webpack.loader.LoaderContext) {
+function genRequest(
+  loaders: (Loader | string)[],
+  context: LoaderContext<VueLoaderOptions>
+) {
   const loaderStrings = loaders.map((loader) => {
     return typeof loader === 'string' ? loader : loader.request
   })

src/pitcher.ts

@@ -1,7 +1,9 @@
-import webpack = require('webpack')
-declare class VueLoaderPlugin implements webpack.Plugin {
+import webpack from 'webpack'
+import type { Compiler } from 'webpack'
+
+declare class VueLoaderPlugin {
   static NS: string
-  apply(compiler: webpack.Compiler): void
+  apply(compiler: Compiler): void
 }
 
 let Plugin: typeof VueLoaderPlugin

src/plugin.ts

@@ -1,5 +1,5 @@
 import * as qs from 'querystring'
-import webpack = require('webpack')
+import type { Compiler, RuleSetRule } from 'webpack'
 import type { VueLoaderOptions } from './'
 import { clientCache, typeDepToSFCMap } from './resolveScript'
 import fs = require('fs')
@@ -11,10 +11,19 @@ const RuleSet = require('webpack/lib/RuleSet')
 const id = 'vue-loader-plugin'
 const NS = 'vue-loader'
 
+// these types are no longer available in webpack 5
+type RuleSetQuery = string | { [k: string]: any }
+interface RuleSetLoader {
+  loader?: string | undefined
+  options?: RuleSetQuery | undefined
+  ident?: string | undefined
+  query?: RuleSetQuery | undefined
+}
+
 class VueLoaderPlugin {
   static NS = NS
 
-  apply(compiler: webpack.Compiler) {
+  apply(compiler: Compiler) {
     // inject NS for plugin installation check in the main loader
     compiler.hooks.compilation.tap(id, (compilation) => {
       compilation.hooks.normalModuleLoader.tap(id, (loaderContext: any) => {
@@ -24,7 +33,7 @@ class VueLoaderPlugin {
 
     const rawRules = compiler.options.module!.rules
     // use webpack's RuleSet utility to normalize user rules
-    const rules = new RuleSet(rawRules).rules as webpack.RuleSetRule[]
+    const rules = new RuleSet(rawRules).rules as RuleSetRule[]
 
     // find the rule that applies to vue files
     let vueRuleIndex = rawRules.findIndex(createMatcher(`foo.vue`))
@@ -47,7 +56,7 @@ class VueLoaderPlugin {
     }
 
     // get the normlized "use" for vue files
-    const vueUse = vueRule.use as webpack.RuleSetLoader[]
+    const vueUse = vueRule.use as RuleSetLoader[]
     // get vue-loader options
     const vueLoaderUseIndex = vueUse.findIndex((u) => {
       // FIXME: this code logic is incorrect when project paths starts with `vue-loader-something`
@@ -171,7 +180,7 @@ class VueLoaderPlugin {
 }
 
 function createMatcher(fakeFile: string) {
-  return (rule: webpack.RuleSetRule) => {
+  return (rule: RuleSetRule) => {
     // #1201 we need to skip the `include` check when locating the vue rule
     const clone = Object.assign({}, rule)
     delete clone.include
@@ -180,7 +189,7 @@ function createMatcher(fakeFile: string) {
   }
 }
 
-function cloneRule(rule: webpack.RuleSetRule) {
+function cloneRule(rule: RuleSetRule) {
   const resource = rule.resource as Function
   const resourceQuery = rule.resourceQuery as Function
   // Assuming `test` and `resourceQuery` tests are executed in series and
@@ -225,7 +234,7 @@ function cloneRule(rule: webpack.RuleSetRule) {
   return res
 }
 
-function cloneRuleForRenderFn(rule: webpack.RuleSetRule) {
+function cloneRuleForRenderFn(rule: RuleSetRule) {
   const resource = rule.resource as Function
   const resourceQuery = rule.resourceQuery as Function
   let currentResource: string