From e8503c882a07e693c5e19b7c559b95b2b57b05c6 Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Sat, 12 Dec 2020 15:43:58 +0800 Subject: [PATCH 1/2] feat: add a @vue/cli-plugin-webpack-4 package for future use More and more webpack plugins no longer support webpack 4 in their most recent versions. For better webpack 5 compatibility and easier upgrade in the future, we should update these dependencies. So it makes sense to extract webpack-4-specific dependencies and logic to a standalone package. While the task is not that urgent at the moment, and I haven't got the time to complete this refactor, I think we should at least have a placeholder package here, so that users don't have to manually add this dependency in later prerelease versions. --- .../cli-plugin-unit-mocha/generator/index.js | 21 +++---------- .../@vue/cli-plugin-unit-mocha/package.json | 1 + packages/@vue/cli-plugin-webpack-4/README.md | 3 ++ .../@vue/cli-plugin-webpack-4/generator.js | 14 +++++++++ packages/@vue/cli-plugin-webpack-4/index.js | 8 +++++ .../@vue/cli-plugin-webpack-4/package.json | 31 +++++++++++++++++++ 6 files changed, 62 insertions(+), 16 deletions(-) create mode 100644 packages/@vue/cli-plugin-webpack-4/README.md create mode 100644 packages/@vue/cli-plugin-webpack-4/generator.js create mode 100644 packages/@vue/cli-plugin-webpack-4/index.js create mode 100644 packages/@vue/cli-plugin-webpack-4/package.json diff --git a/packages/@vue/cli-plugin-unit-mocha/generator/index.js b/packages/@vue/cli-plugin-unit-mocha/generator/index.js index 1c06cb5076..7dfc5b6123 100644 --- a/packages/@vue/cli-plugin-unit-mocha/generator/index.js +++ b/packages/@vue/cli-plugin-unit-mocha/generator/index.js @@ -7,31 +7,20 @@ module.exports = (api, options, rootOptions, invoking) => { hasRouter: api.hasPlugin('router') }) + // mochapack currently does not support webpack 5 yet + require('@vue/cli-plugin-webpack-4/generator')(api, {}, rootOptions, invoking) + api.extendPackage({ devDependencies: { + '@vue/cli-plugin-webpack-4': require('../package.json').dependencies['@vue/cli-plugin-webpack-4'], '@vue/test-utils': isVue3 ? '^2.0.0-0' : '^1.1.0', - 'chai': '^4.2.0', - 'webpack': '^4.0.0' + 'chai': '^4.2.0' }, scripts: { 'test:unit': 'vue-cli-service test:unit' - }, - // Force resolutions is more reliable than module-alias - // Yarn and PNPM 5.10+ support this feature - // So we'll try to use that whenever possible - resolutions: { - '@vue/cli-*/webpack': '^4.0.0' } }) - if (isVue3) { - api.extendPackage({ - devDependencies: { - '@vue/server-renderer': '^3.0.0' - } - }) - } - if (api.hasPlugin('eslint')) { applyESLint(api) } diff --git a/packages/@vue/cli-plugin-unit-mocha/package.json b/packages/@vue/cli-plugin-unit-mocha/package.json index ce9b015a4a..5310dac7fe 100644 --- a/packages/@vue/cli-plugin-unit-mocha/package.json +++ b/packages/@vue/cli-plugin-unit-mocha/package.json @@ -22,6 +22,7 @@ }, "homepage": "https://github.com/vuejs/vue-cli/tree/dev/packages/@vue/cli-plugin-unit-mocha#readme", "dependencies": { + "@vue/cli-plugin-webpack-4": "^4.5.8", "@vue/cli-shared-utils": "^4.5.8", "jsdom": "^16.4.0", "jsdom-global": "^3.0.2", diff --git a/packages/@vue/cli-plugin-webpack-4/README.md b/packages/@vue/cli-plugin-webpack-4/README.md new file mode 100644 index 0000000000..eceaf75ea6 --- /dev/null +++ b/packages/@vue/cli-plugin-webpack-4/README.md @@ -0,0 +1,3 @@ +# @vue/cli-plugin-webpack-4 + +This plugin provides compatibily for webpack 4 in Vue CLI 5. diff --git a/packages/@vue/cli-plugin-webpack-4/generator.js b/packages/@vue/cli-plugin-webpack-4/generator.js new file mode 100644 index 0000000000..195d1476a9 --- /dev/null +++ b/packages/@vue/cli-plugin-webpack-4/generator.js @@ -0,0 +1,14 @@ +/** @type {import('@vue/cli').GeneratorPlugin} */ +module.exports = (api) => { + api.extendPackage({ + devDependencies: { + 'webpack': '^4.0.0' + }, + // Force resolutions is more reliable than module-alias + // Yarn and PNPM 5.10+ support this feature + // So we'll try to use that whenever possible + resolutions: { + '@vue/cli-*/webpack': '^4.0.0' + } + }) +} diff --git a/packages/@vue/cli-plugin-webpack-4/index.js b/packages/@vue/cli-plugin-webpack-4/index.js new file mode 100644 index 0000000000..5497b1d151 --- /dev/null +++ b/packages/@vue/cli-plugin-webpack-4/index.js @@ -0,0 +1,8 @@ +/** @type {import('@vue/cli-service').ServicePlugin} */ +module.exports = () => { + // TODO: + // terser-webpack-plugin v4 + // copy-webpack-plugin v6 + // html-webpack-plugin v4 + // css-minimizer-webpack-plugin v1 +} diff --git a/packages/@vue/cli-plugin-webpack-4/package.json b/packages/@vue/cli-plugin-webpack-4/package.json new file mode 100644 index 0000000000..b4e3707d7d --- /dev/null +++ b/packages/@vue/cli-plugin-webpack-4/package.json @@ -0,0 +1,31 @@ +{ + "name": "@vue/cli-plugin-webpack-4", + "version": "4.5.8", + "description": "webpack-4 plugin for @vue/cli v5", + "main": "index.js", + "repository": { + "type": "git", + "url": "git+https://github.com/vuejs/vue-cli.git", + "directory": "packages/@vue/cli-plugin-webpack-4" + }, + "keywords": [ + "vue", + "cli", + "webpack 4" + ], + "author": "Haoqun Jiang", + "license": "MIT", + "bugs": { + "url": "https://github.com/vuejs/vue-cli/issues" + }, + "homepage": "https://github.com/vuejs/vue-cli/tree/dev/packages/@vue/@vue/cli-plugin-webpack-4#readme", + "publishConfig": { + "access": "public" + }, + "dependencies": { + "webpack": "^4.44.2" + }, + "peerDependencies": { + "@vue/cli-service": "^5.0.0-0" + } +} From bfafffd829d5e7a4c554c07b981286dd703cdc86 Mon Sep 17 00:00:00 2001 From: Haoqun Jiang Date: Mon, 14 Dec 2020 09:24:12 +0800 Subject: [PATCH 2/2] feat: add webpack-4 to official plugin list --- packages/@vue/cli-shared-utils/lib/pluginResolution.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/@vue/cli-shared-utils/lib/pluginResolution.js b/packages/@vue/cli-shared-utils/lib/pluginResolution.js index e8777d04a6..8d112c49c1 100644 --- a/packages/@vue/cli-shared-utils/lib/pluginResolution.js +++ b/packages/@vue/cli-shared-utils/lib/pluginResolution.js @@ -13,7 +13,8 @@ const officialPlugins = [ 'typescript', 'unit-jest', 'unit-mocha', - 'vuex' + 'vuex', + 'webpack-4' ] exports.isPlugin = id => pluginRE.test(id)