解析webpack3升级到webpack4版本遇到的问题(总结)
时间:2022-02-11 16:07
之前的文章《你值得了解的VIM中文乱码的问题(分享)》中,给大家了解了VIM中文乱码的问题。下面本篇文章给大家了解webpack3升级到webpack4版本遇到的问题,伙伴们来看看吧。 据说 成功升级之后,于是来记录下,项目主要是 项目重现编译之后由原来的 需要修改的地方有以下几点: 其他的各种报错信息,注意看,可能是模块版本太低了吧,都升级下就OK了。 【完】 推荐学习:Web pack入门视频教程 以上就是解析webpack3升级到webpack4版本遇到的问题(总结)的详细内容,更多请关注gxlsystem.com其它相关文章!webpack3
比webpack4
编译速度将近快了 60%-80%。vue ^2.5.9
,webpack ^4.10.2
,webpack-dev-sever ^3.1.4
,配合升级的还有vue-loader ^15
1.7MB
减少到1.1MB
,看来在压缩这块也是由效果的。vue-loader14
到15
需要增加如下配置const VueLoaderPlugin = require('vue-loader/lib/plugin') ++++
const MiniCssExtractPlugin = require('mini-css-extract-plugin') // webpack 4 +++
const ExtractTextPlugin = require('extract-text-webpack-plugin') //for webpack3 -----
module.exports = {
...
plugins: [
+ new VueLoaderPlugin(), ++++
+ new MiniCssExtractPlugin({filename:'mian.css'}) //for webpack 4 +++
- new ExtractTextPlugin({filename:'main.css'}) //for webpack 3 ---
]
...
}
webpack-dev-server
升级之后需做如下改动devServer: {
++ contentBase: path.resolve(__dirname, '../dos-html'), // 需要指定路径 ++
port: 7001,
hot: true,
// open: false,
inline: true,
compress: true,
historyApiFallback: true,
....
},
webpack3
升级4
之后需要改动的配置plugins: [
//已经移除
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: function (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
)
}
}),
new webpack.optimize.UglifyJsPlugin(...)//已经移除
}
// ===> 修改为以下
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
moudel.exports = {
mode: 'production', ++ 这里指定模式。
...
optimization: {
splitChunks: {
name(module) {
return (
module.resource && /\.js$/.test(module.resource) &&
module.resource.indexOf(path.join(__dirname, '../node_modules')) === 0
)
}
},
minimize: true,
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,
// drop_debugger: true,
// drop_console: true
},
sourceMap: false
}
})
]
},
...
}