实战笔记：Vue2项目Webpack 3升级到Webpack 4的实操指南 - ToB企服应用市场:ToB评测及商务社交产业平台

npm install

复制代码

npm install --legacy-peer-deps

复制代码

// 修改前
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime"]
}
// 修改后
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": ["transform-vue-jsx", "transform-runtime","transform-es2015-modules-commonjs"]
}

复制代码

// 删除或注释以下代码
const ExtractTextPlugin = require('extract-text-webpack-plugin')
// 改为
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 删除或注释以下代码
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader',
// https://www.cnblogs.com/luosiding/p/8268837.html
publicPath: '../../'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
// 改为
return [options.extract ? MiniCssExtractPlugin.loader : 'vue-style-loader'].concat(loaders)

复制代码

// 删除或注释以下代码
const vueLoaderConfig = require('./vue-loader.conf')
// 改为
const { VueLoaderPlugin } = require('vue-loader')
// module.exports中：
entry: {
app: './src/main.js'
},
// 改为：
entry: {
app: ['babel-polyfill', './src/main.js']
},
// 新增：
mode:process.env.NODE_ENV,
plugins: [
new VueLoaderPlugin()
],
// 删掉options
module: {
rules: [
//...(config.dev.useEslint ? [createLintingRule()] : []),
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig //删除该条
},

复制代码

plugins: [
...,
new webpack.ProvidePlugin({
$: 'jquery'
})
]

复制代码

// 删掉或注释以下代码
const ExtractTextPlugin = require('extract-text-webpack-plugin')
// 改为
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 删掉或注释以下代码
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false
}
},
sourceMap: config.build.productionSourceMap,
parallel: true
}),
new ExtractTextPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css'),
// Setting the following option to `false` will not extract CSS from codesplit chunks.
// Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack.
// It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`,
// increasing file size: https://github.com/vuejs-templates/webpack/issues/1110
allChunks: true,
}),
// 改为：
new MiniCssExtractPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css'),
ignoreOrder: true
}),
// 删掉或注释以下代码：
chunksSortMode: 'dependency'
// 改为：
chunksSortMode: 'none'
// 删掉或注释以下代码：
new webpack.optimize.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(
path.join(__dirname, '../node_modules')
) === 0
)
}
}),
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
minChunks: Infinity
}),
// This instance extracts shared chunks from code splitted 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
new webpack.optimize.CommonsChunkPlugin({
name: 'app',
async: 'vendor-async',
children: true,
minChunks: 3
}),
// 改为：
optimization: {
minimizer: [
new UglifyJsPlugin({
parallel: true, // 开启多进程压缩。
uglifyOptions: {
output: { comments: false },
compress: {
warnings: false,
drop_debugger: true, // 是否清除debugger
drop_console: true // 是否清除所有console
// pure_funcs: ['console.log','console.info','console.warn','console.debug']
//drop_console 设置false,需要特殊清除的
}
},
sourceMap: config.build.productionSourceMap
})
],
splitChunks: {
chunks: 'async',
minSize: 30000, // 大于30KB才单独分离成chunk
maxAsyncRequests: 5,
maxInitialRequests: 3,
name: true,
cacheGroups: {
default: {
priority: -20,
reuseExistingChunk: true
},
// 生成 vendors.js,
vendors: {
name: 'vendors',
test: /[\\/]node_modules[\\/]/,
priority: 10,
chunks: 'all'
// enforce: true
},
common: {
name: 'common',
chunks: 'all',
minChunks: 2,
minSize: 0,
maxInitialRequests: 5 // The default limit is too small to showcase the effect
}
}
},
// 生成 manifest.js
runtimeChunk: {
name: 'manifest'
}
}

复制代码

依赖	原版本	升级后版本	范例
babel-polyfill	--	^6.26.0	新增
babel-plugin-transform-es2015-modules-commonjs	--	^6.26.2	新增
html-webpack-plugin	^2.30.1	^4.3.0	升级
mini-css-extract-plugin	--	0.9.0	新增
vue-loader	^13.3.0	^15.7.0	升级
webpack	^3.6.0	^4.46.0	升级
webpack-cli	--	3.3.12	新增
webpack-dev-server	^2.11.5	^3.11.1	升级