之前看到各大公众号都在狂推webpack新版发布的相关内容,之前就尝试了升级,由于部分插件的原因,未能成功,现在想必过了这么久已经可以了,今天就来试一下在我的项目中升级会遇到哪些坑。
<强>查阅更新日志
在安装更新之前,先大致浏览了一下更新日志,对大部分用户来说迁移上需要注意的应该就是这些点:
<李>在命令行界面运行打包指令需要安装<代码> webpack-cli>
<李>打包需要指定打包模式<代码> 或<代码>开发生产> webpack。DefinePlugin> process.env。NODE_ENV>
<李>不再需要在<代码>插件> 。UglifyJsPlugin> 生产模式自动开启,可以通过<代码>优化。最小值>
<李>删除了<代码> CommonsChunkPlugin> 优化。splitChunks, <代码> optimization.runtimeChunk>
<>强迁移
<李>安装最新的<代码> webpack ,<代码> webpack-cli ,<代码> webpack-dev-server>
<李>为开发中和发布分别配置<代码>模式> webpack。DefinePlugin> 包。json代码中启动脚本的<代码> NODE_ENV>
<李>去掉新webpack.optimize <代码>。UglifyJsPlugin ,<代码> ModuleConcatenationPlugin>
<强>爬坑
在这些配置好之后我遇到的第一个问题就是打包时<代码> extract-text-webpack-plugin>
<李>方法一:安装指定<代码> extract-text-webpack-plugin> @next>
<李>方法二:使用<代码> mini-css-extract-plugin>
如果使用方法二注意在发布打包时需要指定css压缩库配置,并且需要同时写入js压缩库,因为你一旦指定了<代码>优化。最小值>
/* webpack.config。js */const MiniCssExtractPlugin=要求(“mini-css-extract-plugin”);
模块。出口=()=比;{
常量配置={
模块:{
规则:[
{
测试:/\ . css/美元,
用途:[
MiniCssExtractPlugin.loader,
“css-loader& # 63; importLoaders=1”,
“postcss-loader”
]
},
{
测试:/\ .less/美元,
用途:[
MiniCssExtractPlugin.loader,
“css-loader& # 63; importLoaders=1”,
“postcss-loader”,
“less-loader”
]
}
]
},
解决:{
扩展:['。js ', '。jsx”、“.less ']
}
}；
如果(process.env。NODE_ENV==='发展'){
config.module.rules [0] .use=[
“css-hot-loader”,
MiniCssExtractPlugin.loader,
“css-loader& # 63; importLoaders=1”,
“postcss-loader”
]；
config.module.rules [1] .use=[
“css-hot-loader”,
MiniCssExtractPlugin.loader,
“css-loader& # 63; importLoaders=1”,
“postcss-loader”,
{
装载机:“less-loader”,
选择:{
modifyVars:主题
}
}
]；
}
返回配置;
}；/* webpack.config.prod。js */常量合并=要求(“webpack-merge”);
const UglifyJsPlugin=要求(“uglifyjs-webpack-plugin”);
const MiniCssExtractPlugin=要求(“mini-css-extract-plugin”);
const OptimizeCSSAssetsPlugin=要求(“optimize-css-assets-webpack-plugin”);
const webpackBaseConfig=要求(“。/webpack.config”) ();
模块。出口=合并(webpackBaseConfig, {
模式:“生产”,
优化:{
最小值:[
新UglifyJsPlugin ({
缓存:没错,
并行:没错,
uglifyOptions: {
压缩:{
警告:假的,
drop_debugger:没错,
drop_console:假
}
}
}),
新OptimizeCSSAssetsPlugin ({})
]
},
插件:[
新MiniCssExtractPlugin ({
文件名:“css/[名字]. css”
})
]
});
<代码> happypack 炸了,小场面,升级就好<代码> @5.0.0-beta。> 3
