webpack3.0升级4.0的方法步骤
1.webpack3.11升级4.26
为了提升打包效率，在webpack3.11基础之上做了升级，webpack4.0发布以来，零配置的webpack对项目本身提供的“打包”和“压缩”功能已经做了优化，如果在项目开始使用4.0而不用vue-cli的默认配置，遇到的问题或许能少一些。
2.安装/升级依赖
这些依赖有的是在build过程中发现依赖有新的替换或者报错，逐步替换的，如果想遇到多个坑，可以先把webpack、webpack-cli升级到对应版本
devDependencies:
"extract-text-webpack-plugin":"^4.0.0-beta.0" "html-webpack-plugin":"^4.0.0-beta.14" "mini-css-extract-plugin":"^0.9.0"(旧的optimize-css-assets-webpack不支持了) "preload-webpack-plugin":"^3.0.0-beta.4" "script-ext-html-webpack-plugin":"^2.1.3" "vue-loader":"^15.3.0" "webpack":"^4.26.1" "webpack-cli":"^3.1.2" "webpack-dev-server":"^3.2.1" "script-ext-html-webpack-plugin":"^2.1.3"
3.遇到的问题
升级webpack后，build报错：ERRORin./src/App.vue
ModuleError(from./node_modules/vue-loader/lib/index.js
解决：升级vue-loader至15.3.0，
webpack.base.conf.js添加
const{VueLoaderPlugin}=require('vue-loader')
module.exports中添加
plugins:[newVueLoaderPlugin()]
修改配置文件webpack.prod.conf.js：
webpack.optimize.CommonsChunkPluginhasbeenremoved,pleaseuseconfig.optimization.splitChunksinstead.
解决：
webpack.prod.conf.jswebpackConfig配置:
optimization:{
noEmitOnErrors:true,
concatenateModules:true,
splitChunks:{
chunks:'all',
name:'common',
},
runtimeChunk:{
name:'runtime'
}
}
webpack.prod.conf.jswebpackConfig配置:
optimization:{
namedModules:true
},
Plugincouldnotberegisteredat‘html-webpack-plugin-before-html-processing'.Hookwasnotfound.
解决：
npmipreload-webpack-plugin@next-D
Tapable.pluginisdeprecated.UsenewAPIon.hooksinstead
问题：extract-text-webpack-plugin兼容问题，功能：extractcssintoitsownfile
解决：卸载extract-text-webpack-plugin，安装mini-css-extract-plugin
newMiniCssExtractPlugin({
filename:utils.assetsPath('css/[name].[contenthash].css'),
allChunks:false,
}),
build出错：ERRORinTypeError:Cannotreadproperty‘hash'ofundefined
解决:
去掉这段
//打包计时
constSpeedMeasurePlugin=require("speed-measure-webpack-plugin");
constsmp=newSpeedMeasurePlugin();
WARNINGinconfiguration
The‘mode'optionhasnotbeenset,webpackwillfallbackto‘production'forthisvalue.Set‘mode'optionto‘development'or‘production'toenabledefaultsforeachenvironment.
Youcanalsosetitto‘none'todisableanydefaultbehavior.Learnmore:https://webpack.js.org/concepts/mode/
解决：webpackConfig添加mode:‘production'
Tapable.pluginisdeprecated.UsenewAPIon.hooksinstead
解决：
npmi--save-devextract-text-webpack-plugin@next
会下载到extract-text-webpack-plugin@4.0.0-beta
Error:webpack.optimize.CommonsChunkPluginhasbeenremoved,pleaseuseconfig.optimization…
解决:
- 去掉webpack.optimize.CommonsChunkPlugin相关配置
- webpackConfig中与plugins的同级添加
optimization:{
splitChunks:{
cacheGroups:{
commons:{
name:"commons",
chunks:"initial",
minChunks:2
}
}
}
},
UnhandledrejectionError:“dependency”isnotavalidchunksortmode
newHtmlWebpackPlugin({
filename:config.build.index,
template:'index.html',
inject:true,
minify:{
removeComments:true,
collapseWhitespace:true,
removeAttributeQuotes:true
},
//necessarytoconsistentlyworkwithmultiplechunksviaCommonsChunkPlugin
chunksSortMode:'dependency'
}),
解决：chunksSortMode改为auto或者注释
至此:npmrunbuild正常
接下来调npmrundev，直接运行成功
4.总结
开启cache的情况下，原来打包时间22s左右，现在build最快8s左右
升级思路：
- 卸载webpack旧版本、安装新版本webpack,webpack-cli
- 遇到loader、plugin报错，升级loader、plugin，有的在4.0不支持，需要换成新的
- 卸载ExtractTextPlugin、删除对应配置，改用mini-css-extract-plugin
- 配置环境mode
- 其它wenpack3.0优化配置兼容处理
到此这篇关于webpack3.0升级4.0的方法步骤的文章就介绍到这了,更多相关webpack3.0升级4.0内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！