webpack配置信息可在此查看属性
https://developer.aliyun.com/mirror/npm/package/webpack-command
build 文件夹
utils.js中
const ExtractTextPlugin = require('extract-text-webpack-plugin') 修改前
const MiniCssExtractPlugin = require('mini-css-extract-plugin') 修改后
function generateLoaders(){} 中
//修改前
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
//修改后
if (options.extract) {
return [MiniCssExtractPlugin.loader].concat(loaders)
} else {
return ['vue-style-loader'].concat(loaders)
}
build\webpack.prod.conf.js
//修改前
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')
//修改后
const MiniCssExtractPlugin = require('mini-css-extract-plugin')//替换ExtractTextPlugin
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')//替换ParallelUglifyPlugin
使用splitChunk替代commonsChunkPlugin
optimization:{
minimizer:[
//替换压缩方式
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: config.build.productionSourceMap,
uglifyOptions: {
warnings: false
}
}),
new OptimizeCSSPlugin({
cssProcessorOptions: config.build.productionSourceMap
? { safe: true, map: { inline: false } }
: { safe: true }
}),
],
splitChunks:{
chunks: 'async',
minSize: 30000,
minChunks: 1,
maxAsyncRequests: 5,
maxInitialRequests: 3,
name: false,
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
chunks: 'initial',
priority: -10
}
}
},
runtimeChunk: {
name: 'manifest'
},
}
build\webpack.base.conf.js
添加mode,mode必须为development、production、none中的一个。
module.exports = {
mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
context: path.resolve(__dirname, '../'),
entry: {
app: ["babel-polyfill", "./src/main.js"]
}
......
}
原来uglifyjs-webpack-plugin、optimize-css-assets-webpack-plugin配置在plugins中,现在修改为optimization.minimizer中配置
const OptimizeCSSPlugin = require("optimize-css-assets-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: config.build.productionSourceMap,
uglifyOptions: {
warnings: false
}
}),
new OptimizeCSSPlugin()
]
}
升级
1、升级webpack包
vue4由于已经将命令行部分迁移到webpack-cli,所以还得新安装一个包
npm i webpack -D
npm i webpack-cli -D
2、升级webpack-dev-server
webpack4对应的webpack-dev-server从2.x必须升级到3.x,否则会报错
npm i webpack-dev-server -D
3、升级extract-text-webpack-plugin插件
由于旧版本的extract-text-webpack-plugin插件已经不支持webpack4,所以必须升级。但是在我写下这篇文章的当下还没有正式版,只有一个测试版,可以使用
官方提供的是mini-css-extract-plugin这个插件来做替代品,但是这个插件不支持HMR,故而选择了extract-text-webpack-plugin插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
new MiniCssExtractPlugin({
filename: utils.assetsPath('css/[name].[contenthash].css'),
chunkFilename: utils.assetsPath('css/[name].[contenthash].css')
4、升级html-webpack-plugin "^3.2.0"
5、升级node-sass "^4.10.0"
6、升级vue-loader 14以上 "^14.2.4"
7、升级webpack插件
"copy-webpack-plugin": "^5.0.3",
"friendly-errors-webpack-plugin": "^1.7.0",
"html-webpack-plugin": "^3.2.0",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"uglifyjs-webpack-plugin": "^2.1.2",
"vue-loader": "^14.2.4",
"webpack": "^4.32.2",
"webpack-cli": "^3.3.2",
"webpack-bundle-analyzer": "^3.3.2",
"webpack-dev-server": "^3.4.1",
"webpack-merge": "^4.2.1",
"mini-css-extract-plugin": "^0.6.0",//增加项
升级版本号为本人项目中版本号按需修改记得升级
因在原有基础上升级保留一些webpack3的配置 copy出来文件重新install 后 build发现报错
ERROR in static/js/2.58a5c9c8d66d1bdb07e5.js from UglifyJs undefined
查询一下发现是uglifyjs-webpack-plugin webpack3中支持 es6转es5
webpack4中不适用 更换 terser-webpack-plugin
build\webpack.base.conf.js进行修改
const OptimizeCSSPlugin = require("optimize-css-assets-webpack-plugin");
//const UglifyJsPlugin = require("uglifyjs-webpack-plugin");修改引用
const TerserPlugin = require("terser-webpack-plugin");//修改后
optimization: {
minimizer: [
new UglifyJsPlugin({
cache: true,
parallel: true,
sourceMap: config.build.productionSourceMap,
// uglifyOptions: {
// warnings: false
// },//修改uglifyOptions 为terserOptions
terserOptions: {
warnings: false
},
}),
new OptimizeCSSPlugin()
]
}