webpack3.0升級4.0的方法步驟
1.webpack 3.11升級4.26
為了提升打包效率,在webpack3.11基礎(chǔ)之上做了升級,webpack4.0發(fā)布以來,零配置的webpack對項(xiàng)目本身提供的“打包”和“壓縮”功能已經(jīng)做了優(yōu)化,如果在項(xiàng)目開始使用4.0而不用vue-cli的默認(rèn)配置,遇到的問題或許能少一些。
2. 安裝/升級依賴
這些依賴有的是在build過程中發(fā)現(xiàn)依賴有新的替換或者報(bào)錯(cuò),逐步替換的,如果想遇到多個(gè)坑,可以先把webpack、webpack-cli升級到對應(yīng)版本
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報(bào)錯(cuò):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出錯(cuò):ERROR in TypeError: Cannot read property ‘hash' of undefined
解決:
去掉這段 //打包計(jì)時(shí) 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
會(huì)下載到 extract-text-webpack-plugin@4.0.0-beta
Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.o ptimization…
解決:
- 去掉 webpack.optimize.CommonsChunkPlugin相關(guān)配置
- 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 正常
接下來調(diào)npm run dev,直接運(yùn)行成功
4. 總結(jié)
開啟cache的情況下,原來打包時(shí)間22s左右,現(xiàn)在build最快8s左右
升級思路:
- 卸載webpack舊版本、安裝新版本webpack, webpack-cli
- 遇到loader、plugin報(bào)錯(cuò),升級loader、plugin,有的在4.0不支持,需要換成新的
- 卸載 ExtractTextPlugin、刪除對應(yīng)配置,改用 mini-css-extract-plugin
- 配置環(huán)境mode
- 其它wenpack3.0優(yōu)化配置兼容處理
到此這篇關(guān)于webpack3.0升級4.0的方法步驟的文章就介紹到這了,更多相關(guān)webpack3.0升級4.0內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS上傳圖片前實(shí)現(xiàn)圖片預(yù)覽效果的方法
這篇文章主要介紹了JS上傳圖片前實(shí)現(xiàn)圖片預(yù)覽效果的方法,涉及javascript操作圖片的技巧,需要的朋友可以參考下2015-03-03Flexible.js可伸縮布局實(shí)現(xiàn)方法詳解
這篇文章主要介紹了Flexible.js可伸縮布局實(shí)現(xiàn)方法詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11微信小程序?qū)崿F(xiàn)點(diǎn)擊空白隱藏的方法示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)點(diǎn)擊空白隱藏的方法示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08js實(shí)現(xiàn)課堂隨機(jī)點(diǎn)名系統(tǒng)
這篇文章主要介紹了js實(shí)現(xiàn)課堂隨機(jī)點(diǎn)名系統(tǒng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-11-11JavaScript識(shí)別網(wǎng)頁關(guān)鍵字并進(jìn)行描紅的方法
這篇文章主要介紹了JavaScript識(shí)別網(wǎng)頁關(guān)鍵字并進(jìn)行描紅的方法,通過字符串的遍歷、匹配及動(dòng)態(tài)添加等操作實(shí)現(xiàn)識(shí)別與描紅的功能,非常簡單實(shí)用,需要的朋友可以參考下2015-11-11