您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)webpack4如何遷移的內(nèi)容。小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過(guò)來(lái)看看吧。
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
一定要寫(xiě)完整,vue-loader
如果只寫(xiě)vue
會(huì)報(bào)錯(cuò)。loader
還可以通過(guò)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í)候沒(méi)有必要將它們先轉(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),用來(lái)啟動(dòng)webpack的
插件升級(jí),同理,哪個(gè)報(bào)錯(cuò)就升級(jí)哪個(gè),除了html-webpack-plugin
用下面的方法升級(jí),原因是作者還未來(lái)得及升級(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:雖然說(shuō)webpack 4
是零配置,入口默認(rèn)是src/index.js
,出口是dist/
,但由于項(xiàng)目是多頁(yè)面的,所以這一步并沒(méi)有省略,根據(jù)實(shí)際情況來(lái)。
第三步 移除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" // 要緩存的分割出來(lái)的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'] })
剛開(kāi)始一直出錯(cuò),是因?yàn)槲覜](méi)有復(fù)寫(xiě)default
,也沒(méi)有default:false
,所以其實(shí)默認(rèn)配置有將所有的模塊的公共部分分離到某個(gè)文件中,但我在HtmlWebpackPlugin
中的chunks
中又沒(méi)有添加,所以要么覆寫(xiě)原來(lái)的默認(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í),還有一些特性并沒(méi)有用到,所以沒(méi)有提及,比如sideEffects
、javascript/auto javascript/esm javascript/dynamic
、webassembly/experimental
等等,有機(jī)會(huì)再去探索。
感謝各位的閱讀!關(guān)于“webpack4如何遷移”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。