webpack3升级到webpack4版本遇到问题的示例分析
这篇文章主要介绍了webpack3升级到webpack4版本遇到问题的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。
创新互联建站专业为企业提供皇姑网站建设、皇姑做网站、皇姑网站设计、皇姑网站制作等企业网站建设、网页设计与制作、皇姑企业网站模板建站服务,十载皇姑做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。
据说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 } }) ] }, ... }
其他的各种报错信息,注意看,可能是模块版本太低了吧,都升级下就OK了。
感谢你能够认真阅读完这篇文章,希望小编分享的“webpack3升级到webpack4版本遇到问题的示例分析”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!
网页名称:webpack3升级到webpack4版本遇到问题的示例分析
当前路径:http://pwwzsj.com/article/jogpjg.html