1.webpack 3.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报错:ERROR in ./src/App.vue
Module Error (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:[new VueLoaderPlugin()]
修改配置文件 webpack.prod.conf.js:
webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead.
解决:
webpack.prod.conf.js webpackConfig配置: optimization: { noEmitOnErrors: true, concatenateModules: true, splitChunks: { chunks: 'all', name: 'common', }, runtimeChunk: { name: 'runtime' } } webpack.prod.conf.js webpackConfig配置: optimization:{ namedModules: true },
Plugin could not be registered at ‘html-webpack-plugin-before-html-processing'. Hook was not found.
解决:
npm i preload-webpack-plugin@next -D
Tapable.plugin is deprecated. Use new API on .hooks instead
问题:extract-text-webpack-plugin兼容问题 ,功能:extract css into its own file
解决: 卸载extract-text-webpack-plugin,安装mini-css-extract-plugin
new MiniCssExtractPlugin({ filename: utils.assetsPath('css/[name].[contenthash].css'), allChunks: false, }),
build出错:ERROR in TypeError: Cannot read property ‘hash' of undefined
解决:
去掉这段 //打包计时 const SpeedMeasurePlugin = require("speed-measure-webpack-plugin"); const smp = new SpeedMeasurePlugin();
WARNING in configuration
The ‘mode' option has not been set, webpack will fallback to ‘production' for this value. Set ‘mode' option to ‘development' or ‘production' to enable defaults for each environment.
You can also set it to ‘none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
解决:webpackConfig添加 mode: ‘production'
Tapable.plugin is deprecated. Use new API on .hooks instead
解决:
npm i --save-dev extract-text-webpack-plugin@next
会下载到 extract-text-webpack-plugin@4.0.0-beta
Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.o ptimization…
解决:
- 去掉 webpack.optimize.CommonsChunkPlugin相关配置
- webpackConfig中与plugins的同级添加
optimization: { splitChunks: { cacheGroups: { commons: { name: "commons", chunks: "initial", minChunks: 2 } } } },
Unhandled rejection Error: “dependency” is not a valid chunk sort mode
new HtmlWebpackPlugin({ filename: config.build.index, template: 'index.html', inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true }, // necessary to consistently work with multiple chunks via CommonsChunkPlugin chunksSortMode: 'dependency' }),
解决:chunksSortMode改为auto或者注释
至此:npm run build 正常
接下来调npm run dev,直接运行成功
4. 总结
开启cache的情况下,原来打包时间22s左右,现在build最快8s左右
升级思路:
- 卸载webpack旧版本、安装新版本webpack, webpack-cli
- 遇到loader、plugin报错,升级loader、plugin,有的在4.0不支持,需要换成新的
- 卸载 ExtractTextPlugin、删除对应配置,改用 mini-css-extract-plugin
- 配置环境mode
- 其它wenpack3.0优化配置兼容处理
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
更新日志
- 黄乙玲1988-无稳定的爱心肝乱糟糟[日本东芝1M版][WAV+CUE]
- 群星《我们的歌第六季 第3期》[320K/MP3][70.68MB]
- 群星《我们的歌第六季 第3期》[FLAC/分轨][369.48MB]
- 群星《燃!沙排少女 影视原声带》[320K/MP3][175.61MB]
- 乱斗海盗瞎6胜卡组推荐一览 深暗领域乱斗海盗瞎卡组分享
- 炉石传说乱斗6胜卡组分享一览 深暗领域乱斗6胜卡组代码推荐
- 炉石传说乱斗本周卡组合集 乱斗模式卡组最新推荐
- 佟妍.2015-七窍玲珑心【万马旦】【WAV+CUE】
- 叶振棠陈晓慧.1986-龙的心·俘虏你(2006复黑限量版)【永恒】【WAV+CUE】
- 陈慧琳.1998-爱我不爱(国)【福茂】【WAV+CUE】
- 咪咕快游豪礼放送,百元京东卡、海量欢乐豆就在咪咕咪粉节!
- 双11百吋大屏焕新“热”,海信AI画质电视成最大赢家
- 海信电视E8N Ultra:真正的百吋,不止是大!
- 曾庆瑜1990-曾庆瑜历年精选[派森][WAV+CUE]
- 叶玉卿1999-深情之选[飞图][WAV+CUE]