Skip to content

Commit 4ce7edd

Browse files
haoqunjianghaoqunjiang
authored
feat: use html-webpack-plugin v5 by default (#6269)
1 parent f9d53c7 commit 4ce7edd

File tree

15 files changed

+98
-38
lines changed

15 files changed

+98
-38
lines changed

‎docs/migrations/migrate-from-v4.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ No longer supports generating project with `node-sass`. It has been [deprecated]
7878

7979
#### Underlying Loaders and Plugins
8080

81-
* `html-webpack-plugin` is upgraded from v3 to v4, see more details in the [release announcement](https://dev.to/jantimon/html-webpack-plugin-4-has-been-released-125d).
81+
* `html-webpack-plugin` is upgraded from v3 to v5, and for webpack 4 users, v4 will be used. More details are available in the [release announcement of `html-webpack-plugin` v4](https://dev.to/jantimon/html-webpack-plugin-4-has-been-released-125d) and the [full changelog](https://github.com/jantimon/html-webpack-plugin/blob/master/CHANGELOG.md).
8282
* `sass-loader` v7 support is dropped. See the v8 breaking changes at its [changelog](https://github.com/webpack-contrib/sass-loader/blob/master/CHANGELOG.md#800-2019-08-29).
8383
* `postcss-loader` is upgraded from v3 to v4. Most notably, `PostCSS` options (`plugin` / `syntax` / `parser` / `stringifier`) are moved into the `postcssOptions` field. More details available at the [changelog](https://github.com/webpack-contrib/postcss-loader/blob/master/CHANGELOG.md#400-2020-09-07).
8484
* `copy-webpack-plugin` is upgraded from v5 to v6. If you never customized its config through `config.plugin('copy')`, there should be no user-facing breaking changes. A full list of breaking changes is available at [`copy-webpack-plugin` v6.0.0 release](https://github.com/webpack-contrib/copy-webpack-plugin/releases/tag/v6.0.0).

‎packages/@vue/cli-plugin-babel/index.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,11 @@ module.exports = (api, options) => {
3939
.test(/\.m?jsx?$/)
4040
.exclude
4141
.add(filepath => {
42+
// With data URI support in webpack 5, filepath could be undefined
43+
if (!filepath) {
44+
return true
45+
}
46+
4247
// always transpile js in vue files
4348
if (/\.vue\.jsx?$/.test(filepath)) {
4449
return false

‎packages/@vue/cli-plugin-pwa/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
},
2525
"dependencies": {
2626
"@vue/cli-shared-utils": "^5.0.0-alpha.3",
27-
"html-webpack-plugin": "^4.5.0",
27+
"html-webpack-plugin": "^5.0.0",
2828
"webpack": "^5.10.0",
2929
"workbox-webpack-plugin": "^6.0.2"
3030
},

‎packages/@vue/cli-plugin-webpack-4/generator.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,10 @@ module.exports = (api) => {
88
// Yarn and PNPM 5.10+ support this feature
99
// So we'll try to use that whenever possible
1010
resolutions: {
11-
'@vue/cli-*/webpack': '^4.0.0'
11+
'@vue/cli-*/webpack': '^4.0.0',
12+
'html-webpack-plugin': '^4.5.1'
1213
}
1314
})
15+
16+
// TODO: if uses sass, replace sass-loader@11 with sass-loader@10
1417
}

‎packages/@vue/cli-plugin-webpack-4/index.js

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
1+
const path = require('path')
2+
const moduleAlias = require('module-alias')
3+
4+
const htmlWebpackPlugin4Path = path.dirname(require.resolve('html-webpack-plugin/package.json'))
5+
// We have to use module-alias for html-webpack-plguin, as it is required by many other plugins
6+
// as peer dependency for its `getHooks` API.
7+
// Should add the alias as early as possible to avoid problems
8+
// TODO: add debugging log here
9+
moduleAlias.addAlias('html-webpack-plugin', htmlWebpackPlugin4Path)
10+
111
/** @type {import('@vue/cli-service').ServicePlugin} */
2-
module.exports = () => {
3-
// TODO:
4-
// terser-webpack-plugin v4
5-
// copy-webpack-plugin v6
6-
// html-webpack-plugin v4
7-
// css-minimizer-webpack-plugin v1
12+
module.exports = (api, options) => {
813
}

‎packages/@vue/cli-plugin-webpack-4/package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@
2323
"access": "public"
2424
},
2525
"dependencies": {
26+
"html-webpack-plugin": "^4.5.1",
27+
"module-alias": "^2.2.2",
2628
"webpack": "^4.44.2"
2729
},
2830
"peerDependencies": {

‎packages/@vue/cli-service/__tests__/build.spec.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,8 @@ test('build', async () => {
3838
// expect(index).toMatch(/<link [^>]+app[^>]+\.css" rel="preload" as="style">/)
3939

4040
// should inject scripts
41-
expect(index).toMatch(/<script src="\/js\/chunk-vendors\.\w{8}\.js">/)
42-
expect(index).toMatch(/<script src="\/js\/app\.\w{8}\.js">/)
41+
expect(index).toMatch(/<script defer="defer" src="\/js\/chunk-vendors\.\w{8}\.js">/)
42+
expect(index).toMatch(/<script defer="defer" src="\/js\/app\.\w{8}\.js">/)
4343
// should inject css
4444
expect(index).toMatch(/<link href="\/css\/app\.\w{8}\.css" rel="stylesheet">/)
4545

‎packages/@vue/cli-service/__tests__/cors.spec.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,8 @@ test('build', async () => {
3030
// expect(index).toMatch(/<link [^>]+app[^>]+\.css rel=preload as=style crossorigin>/)
3131

3232
// should apply crossorigin and add integrity to scripts and css
33-
expect(index).toMatch(/<script src="\/js\/chunk-vendors\.\w{8}\.js" crossorigin integrity="sha384-.{64}\s?">/)
34-
expect(index).toMatch(/<script src="\/js\/app\.\w{8}\.js" crossorigin integrity="sha384-.{64}\s?">/)
33+
expect(index).toMatch(/<script defer="defer" src="\/js\/chunk-vendors\.\w{8}\.js" crossorigin integrity="sha384-.{64}\s?">/)
34+
expect(index).toMatch(/<script defer="defer" src="\/js\/app\.\w{8}\.js" crossorigin integrity="sha384-.{64}\s?">/)
3535
expect(index).toMatch(/<link href="\/css\/app\.\w{8}\.css" rel="stylesheet" crossorigin integrity="sha384-.{64}\s?">/)
3636

3737
// verify integrity is correct by actually running it

‎packages/@vue/cli-service/__tests__/modernMode.spec.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -32,16 +32,16 @@ test('modern mode', async () => {
3232
const index = await project.read('dist/index.html')
3333

3434
// should use <script type="module" crossorigin="use-credentials"> for modern bundle
35-
expect(index).toMatch(/<script src="\/js\/chunk-vendors\.\w{8}\.js" type="module">/)
36-
expect(index).toMatch(/<script src="\/js\/app\.\w{8}\.js" type="module">/)
35+
expect(index).toMatch(/<script defer="defer" src="\/js\/chunk-vendors\.\w{8}\.js" type="module">/)
36+
expect(index).toMatch(/<script defer="defer" src="\/js\/app\.\w{8}\.js" type="module">/)
3737

3838
// should use <link rel="modulepreload" crossorigin="use-credentials"> for modern bundle
3939
// expect(index).toMatch(/<link [^>]*js\/chunk-vendors\.\w{8}\.js" rel="modulepreload" as="script">/)
4040
// expect(index).toMatch(/<link [^>]*js\/app\.\w{8}\.js" rel="modulepreload" as="script">/)
4141

4242
// should use <script nomodule> for legacy bundle
43-
expect(index).toMatch(/<script src="\/js\/chunk-vendors-legacy\.\w{8}\.js" nomodule>/)
44-
expect(index).toMatch(/<script src="\/js\/app-legacy\.\w{8}\.js" nomodule>/)
43+
expect(index).toMatch(/<script defer="defer" src="\/js\/chunk-vendors-legacy\.\w{8}\.js" nomodule>/)
44+
expect(index).toMatch(/<script defer="defer" src="\/js\/app-legacy\.\w{8}\.js" nomodule>/)
4545

4646
// should inject Safari 10 nomodule fix
4747
const { safariFix } = require('../lib/webpack/ModernModePlugin')
@@ -53,8 +53,8 @@ test('modern mode', async () => {
5353
expect(stdout2).toMatch('Build complete.')
5454
const index2 = await project.read('dist/index.html')
5555
// should use <script type="module" crossorigin="use-credentials"> for modern bundle
56-
expect(index2).toMatch(/<script src="\/js\/chunk-vendors\.\w{8}\.js" crossorigin="use-credentials" type="module">/)
57-
expect(index2).toMatch(/<script src="\/js\/app\.\w{8}\.js" crossorigin="use-credentials" type="module">/)
56+
expect(index2).toMatch(/<script defer="defer" src="\/js\/chunk-vendors\.\w{8}\.js" crossorigin="use-credentials" type="module">/)
57+
expect(index2).toMatch(/<script defer="defer" src="\/js\/app\.\w{8}\.js" crossorigin="use-credentials" type="module">/)
5858
// should use <link rel="modulepreload" crossorigin="use-credentials"> for modern bundle
5959
// expect(index2).toMatch(/<link [^>]*js\/chunk-vendors\.\w{8}\.js" rel="modulepreload" as="script" crossorigin="use-credentials">/)
6060
// expect(index2).toMatch(/<link [^>]*js\/app\.\w{8}\.js" rel="modulepreload" as="script" crossorigin="use-credentials">/)

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -187,6 +187,18 @@ module.exports = class Service {
187187
return idToPlugin(id, resolveModule(id, this.pkgContext))
188188
}
189189
})
190+
191+
// Add the plugin automatically to simplify the webpack-4 tests
192+
// so that a simple Jest alias would suffice, avoid changing every
193+
// preset used in the tests
194+
if (
195+
process.env.VUE_CLI_TEST &&
196+
process.env.VUE_CLI_USE_WEBPACK4 &&
197+
!projectPlugins.some((p) => p.id === '@vue/cli-plugin-webpack-4')
198+
) {
199+
builtInPlugins.push(idToPlugin('@vue/cli-plugin-webpack-4'))
200+
}
201+
190202
plugins = builtInPlugins.concat(projectPlugins)
191203
}
192204

0 commit comments

Comments
 (0)