diff --git a/packages/@vue/cli-service/lib/config/app.js b/packages/@vue/cli-service/lib/config/app.js index f940b4ad8c..916fea3005 100644 --- a/packages/@vue/cli-service/lib/config/app.js +++ b/packages/@vue/cli-service/lib/config/app.js @@ -1,6 +1,7 @@ // config that are specific to --target app const fs = require('fs') const path = require('path') +const isWP5 = parseInt(require('webpack').version, 10) === 5 // ensure the filename passed to html-webpack-plugin is a relative path // because it cannot correctly handle absolute paths @@ -130,8 +131,11 @@ module.exports = (api, options) => { }) // keep chunk ids stable so async chunks have consistent hash (#1916) - webpackConfig - .plugin('named-chunks') + if (isWP5) { + webpackConfig.optimization.namedChunks = true + } else { + webpackConfig + .plugin('named-chunks') .use(require('webpack/lib/NamedChunksPlugin'), [chunk => { if (chunk.name) { return chunk.name @@ -143,11 +147,15 @@ module.exports = (api, options) => { ) return `chunk-` + joinedHash }]) + } } // resolve HTML file(s) const HTMLPlugin = require('html-webpack-plugin') - const PreloadPlugin = require('@vue/preload-webpack-plugin') + let PreloadPlugin + if (!isWP5) { + PreloadPlugin = require('@vue/preload-webpack-plugin') + } const multiPageConfig = options.pages const htmlPath = api.resolve('public/index.html') const defaultHtmlPath = path.resolve(__dirname, 'index-default.html') @@ -168,7 +176,7 @@ module.exports = (api, options) => { .plugin('html') .use(HTMLPlugin, [htmlOptions]) - if (!isLegacyBundle) { + if (!isLegacyBundle && !isWP5) { // inject preload/prefetch to HTML webpackConfig .plugin('preload') diff --git a/packages/@vue/cli-service/lib/config/base.js b/packages/@vue/cli-service/lib/config/base.js index ab8c89b023..562586d963 100644 --- a/packages/@vue/cli-service/lib/config/base.js +++ b/packages/@vue/cli-service/lib/config/base.js @@ -1,3 +1,5 @@ +const isWP5 = parseInt(require('webpack').version, 10) === 5 + module.exports = (api, options) => { api.chainWebpack(webpackConfig => { const isLegacyBundle = process.env.VUE_CLI_MODERN_MODE && !process.env.VUE_CLI_MODERN_BUILD @@ -171,8 +173,10 @@ module.exports = (api, options) => { .end() // shims + if (isWP5) { - webpackConfig.node + } else { + webpackConfig.node .merge({ // prevent webpack from injecting useless setImmediate polyfill because Vue // source contains it (although only uses it if it's native). @@ -188,7 +192,7 @@ module.exports = (api, options) => { tls: 'empty', child_process: 'empty' }) - + } const resolveClientEnv = require('../util/resolveClientEnv') webpackConfig .plugin('define') diff --git a/packages/@vue/cli-service/lib/config/prod.js b/packages/@vue/cli-service/lib/config/prod.js index 64c966f4f5..001be0794b 100644 --- a/packages/@vue/cli-service/lib/config/prod.js +++ b/packages/@vue/cli-service/lib/config/prod.js @@ -1,3 +1,5 @@ +const isWP5 = parseInt(require('webpack').version, 10) === 5 + module.exports = (api, options) => { api.chainWebpack(webpackConfig => { if (process.env.NODE_ENV === 'production') { @@ -6,11 +8,15 @@ module.exports = (api, options) => { .devtool(options.productionSourceMap ? 'source-map' : false) // keep module.id stable when vendor modules does not change - webpackConfig - .plugin('hash-module-ids') + if (isWP5) { + webpackConfig.optimization.moduleIds = 'hashed' + } else { + webpackConfig + .plugin('hash-module-ids') .use(require('webpack/lib/HashedModuleIdsPlugin'), [{ hashDigest: 'hex' }]) + } // disable optimization during tests to speed things up if (process.env.VUE_CLI_TEST) {