webpack4的遷移的使用方法
感覺是突然之間,webpack4的消息就滿天飛了,聽說打包速度提高了很多,還有最大的噱頭是實(shí)現(xiàn)了零配置,leader有一天就吩咐我說,有時(shí)間把我們的項(xiàng)目也升個(gè)級(jí)唄。好嘞。
1.x到2.x
這次升級(jí)跨度比較大,我們是從webpack1.x升級(jí)到4.x,因?yàn)?.x與2.x相差挺大,所以第一件事,就是先升到2.x,比較大的改動(dòng)就是loader的配置方式
// 1.x preLoaders: [ { test: /\.vue$/, loader: 'eslint', exclude: /node_modules/ }, { test: /\.js$/, loader: 'eslint', exclude: /node_modules/ } ], loaders: [ { test: /\.vue$/, loader: 'vue' }, { test: /\.json$/, loader: 'json' }, { test: /\.html$/, loader: 'html' }, ... ] //2.x module: { rules: [ { test: /.vue$/, use: 'eslint-loader', enforce: 'pre', // 對(duì)應(yīng)1.x的preLoaders exclude: /node_modules/ }, { test: /.js$/, use: 'eslint-loader', enforce: 'pre', exclude: /node_modules/ }, { test: /\.vue$/, use: 'vue-loader' }, { test: /\.json$/, use: 'json-loader' }, { test: /\.html$/, use: 'html-loader' }, ... ] },
而且loader
一定要寫完整,vue-loader
如果只寫vue
會(huì)報(bào)錯(cuò)。loader
還可以通過options
進(jìn)行配置。
{ loader: 'css-loader', options: { autoprefixer: false } }
舊版的鏈?zhǔn)秸{(diào)用也用數(shù)組替代。
1.x
style!postcss!less
2.x
use: [ "style-loader", "css-loader", "less-loader" ]
webpack2.x
默認(rèn)支持es6的模塊,所以在編譯時(shí)候沒有必要將它們先轉(zhuǎn)換CommonJS
模塊再處理,babel-preset-es2015-webpack
已經(jīng)支持不轉(zhuǎn)換模塊中的import
和export
,只需要設(shè)置.babelrc
"presets": [ ["es2015", { "modules": false }] ]
另外就是插件的升級(jí),運(yùn)行時(shí)哪個(gè)插件報(bào)錯(cuò)就升級(jí)哪個(gè)插件,屢試不爽。
2.x到4.x
第一步:版本升級(jí)
- 不再支持node 4,可以直接升級(jí)到8.x版本
- webpack升級(jí)
npm install webpack@4 --save npm install webpack-cli --save // 不要忘記這一點(diǎn),用來啟動(dòng)webpack的
插件升級(jí),同理,哪個(gè)報(bào)錯(cuò)就升級(jí)哪個(gè),除了html-webpack-plugin
用下面的方法升級(jí),原因是作者還未來得及升級(jí)
npm i webpack-contrib/html-webpack-plugin --save-dev
extract-text-webpack-plugin
只有最新的beta版本才支持,所以npm install extract-text-webpack-plugin@next --save-dev
第二步 運(yùn)行命令中添加 --mode development
和--mode production
PS:雖然說webpack 4
是零配置,入口默認(rèn)是src/index.js
,出口是dist/
,但由于項(xiàng)目是多頁(yè)面的,所以這一步并沒有省略,根據(jù)實(shí)際情況來。
第三步 移除CommonsChunkPlugin
//替代方案 module: { rules: [ ... ] }, optimization: { splitChunks: { chunks: "all", // 必須三選一:'initial' | 'all' | 'async' minSize: 0, minChunks: 1, maxAsyncRequests: 1, maxInitialRequests: 1, name: () => {}, cacheGroups: { vendor: { chunks: 'all', test: /node_modules/, // 正則規(guī)則驗(yàn)證,如果符合就提取chunks name: "vendor" // 要緩存的分割出來的chunk名稱 }, default: { chunks: 'all', name: 'commons', reuseExistingChunks: true } } } }
因?yàn)槎鄠€(gè)頁(yè)面,所以結(jié)合了html-webpack-plugin
new HtmlWebpackPlugin({ template: 'index.html', chunks: ['vendor', 'commons', 'index'] })
剛開始一直出錯(cuò),是因?yàn)槲覜]有復(fù)寫default
,也沒有default:false
,所以其實(shí)默認(rèn)配置有將所有的模塊的公共部分分離到某個(gè)文件中,但我在HtmlWebpackPlugin
中的chunks
中又沒有添加,所以要么覆寫原來的默認(rèn)配置,要么就關(guān)閉默認(rèn)配置。
第四步:配置postcss autoprefixer
在根目錄下創(chuàng)建一個(gè)文件`postcss.config.js`
module.exports = { plugins: [ require('postcss-inline-svg')({ removeFill: false }), require('postcss-pxtorem')({ replace: process.env.NODE_ENV === 'production', rootValue: 750 / 16, minPixelValue: 1.1, propWhiteList: [], unitPrecision: 5 }), require('autoprefixer')({browsers: ['iOS>7', 'Android>4']}) ] }; ... { test: /\.(css|less)$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use:[{ loader: 'css-loader', options: { autoprefixer: false } }, { loader: 'postcss-loader', options: { sourceMap: true } }, { loader: 'less-loader', options: { relativeUrls: true } }] }) }, ...
第五步:不需要UglifyJsPlugin插件
只需要設(shè)置optimization.minimize: true
就行,production mode
下面自動(dòng)為true
以上只是在原有項(xiàng)目的基礎(chǔ)上對(duì)webpack 4
的升級(jí),還有一些特性并沒有用到,所以沒有提及,比如sideEffects
、javascript/auto javascript/esm javascript/dynamic
、webassembly/experimental
等等,有機(jī)會(huì)再去探索。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 詳解webpack4多入口、多頁(yè)面項(xiàng)目構(gòu)建案例
- karma+webpack搭建vue單元測(cè)試環(huán)境的方法示例
- 淺談Webpack 是如何加載模塊的
- 從零開始搭建webpack+react開發(fā)環(huán)境的詳細(xì)步驟
- webpack4 css打包壓縮問題的解決
- 淺談webpack-dev-server的配置和使用
- vue-cli與webpack處理靜態(tài)資源的方法及webpack打包的坑
- Vue項(xiàng)目webpack打包部署到Tomcat刷新報(bào)404錯(cuò)誤問題的解決方案
- 使用webpack搭建react開發(fā)環(huán)境的方法
- WebPack配置vue多頁(yè)面的技巧
- Webpack path與publicPath的區(qū)別詳解
相關(guān)文章
小程序中設(shè)置緩存過期的實(shí)現(xiàn)方法
這篇文章主要介紹了小程序中設(shè)置緩存過期的實(shí)現(xiàn)方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01調(diào)試JavaScript中正則表達(dá)式中遇到的問題
這篇文章主要介紹了調(diào)試JavaScript中正則表達(dá)式中遇到的問題,需要的朋友可以參考下2015-01-01微信小程序的WXSS和全局、頁(yè)面配置詳細(xì)講解
WXSS(WeiXin?Style?Sheets)是一套樣式語言,用于描述?WXML?的組件樣式,下面這篇文章主要給大家介紹了關(guān)于微信小程序WXSS和全局、頁(yè)面配置的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08Javascript利用canvas繪制兩點(diǎn)間曲線和箭頭
這篇文章主要為大家詳細(xì)介紹了Javascript如何利用canvas實(shí)現(xiàn)在兩點(diǎn)間繪制曲線和矩形,并且在矩形中繪制文字,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-10-10JS實(shí)現(xiàn)對(duì)json對(duì)象排序并刪除id相同項(xiàng)功能示例
這篇文章主要介紹了JS實(shí)現(xiàn)對(duì)json對(duì)象排序并刪除id相同項(xiàng)功能,涉及javascript針對(duì)json格式數(shù)據(jù)的遍歷、運(yùn)算、判斷、添加、刪除等相關(guān)操作技巧,需要的朋友可以參考下2018-04-04微信公眾號(hào)平臺(tái)接口開發(fā) 獲取微信服務(wù)器IP地址方法解析
這篇文章主要介紹了微信公眾號(hào)平臺(tái)接口開發(fā) 獲取微信服務(wù)器IP地址方法解析,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08ElementUI中el-tree如何獲取每個(gè)節(jié)點(diǎn)點(diǎn)擊的選中狀態(tài)
ElementUI中el-tree獲取每個(gè)節(jié)點(diǎn)點(diǎn)擊的選中狀態(tài),有時(shí)候需要獲取el-tree每個(gè)節(jié)點(diǎn)的點(diǎn)擊狀態(tài),可以通過以下方式,其中isCheck類型為布爾值,本文結(jié)合實(shí)例代碼介紹ElementUI中el-tree獲取每個(gè)節(jié)點(diǎn)點(diǎn)擊的選中狀態(tài),感興趣的朋友一起看看吧2023-12-12