點擊下載
本文文檔

當(dāng)前位置：首頁 - 科技 - 知識百科 - 正文

webpack4的遷移的使用方法

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 22:14:06

webpack4的遷移的使用方法

webpack4的遷移的使用方法:感覺是突然之間，webpack4的消息就滿天飛了，聽說打包速度提高了很多，還有最大的噱頭是實現(xiàn)了零配置，leader有一天就吩咐我說，有時間把我們的項目也升個級唄。好嘞。 1.x到2.x 這次升級跨度比較大，我們是從webpack1.x升級到4.x，因為1.x與2.x相差

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀webpack4的遷移的使用方法:感覺是突然之間，webpack4的消息就滿天飛了，聽說打包速度提高了很多，還有最大的噱頭是實現(xiàn)了零配置，leader有一天就吩咐我說，有時間把我們的項目也升個級唄。好嘞。 1.x到2.x 這次升級跨度比較大，我們是從webpack1.x升級到4.x，因為1.x與2.x相差

感覺是突然之間，webpack4的消息就滿天飛了，聽說打包速度提高了很多，還有最大的噱頭是實現(xiàn)了零配置，leader有一天就吩咐我說，有時間把我們的項目也升個級唄。好嘞。

1.x到2.x

這次升級跨度比較大，我們是從webpack1.x升級到4.x，因為1.x與2.x相差挺大，所以第一件事，就是先升到2.x，比較大的改動就是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', // 對應(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會報錯。loader還可以通過options進行配置。

{
 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的模塊，所以在編譯時候沒有必要將它們先轉(zhuǎn)換CommonJS模塊再處理，babel-preset-es2015-webpack已經(jīng)支持不轉(zhuǎn)換模塊中的import和export，只需要設(shè)置.babelrc

"presets": [
 ["es2015", { "modules": false }]
]

另外就是插件的升級，運行時哪個插件報錯就升級哪個插件，屢試不爽。

2.x到4.x

第一步：版本升級

不再支持node 4，可以直接升級到8.x版本
webpack升級

npm install webpack@4 --save

npm install webpack-cli --save // 不要忘記這一點，用來啟動webpack的

插件升級，同理，哪個報錯就升級哪個，除了html-webpack-plugin用下面的方法升級，原因是作者還未來得及升級

npm i webpack-contrib/html-webpack-plugin --save-dev

extract-text-webpack-plugin只有最新的beta版本才支持，所以npm install extract-text-webpack-plugin@next --save-dev

第二步運行命令中添加 --mode development和--mode production

PS：雖然說webpack 4是零配置，入口默認(rèn)是src/index.js，出口是dist/，但由于項目是多頁面的，所以這一步并沒有省略，根據(jù)實際情況來。

第三步移除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ī)則驗證，如果符合就提取chunks
 name: "vendor" // 要緩存的分割出來的chunk名稱
 },
 default: {
 chunks: 'all',
 name: 'commons',
 reuseExistingChunks: true
 }
 }
 }
}

因為多個頁面，所以結(jié)合了html-webpack-plugin

new HtmlWebpackPlugin({
 template: 'index.html',
 chunks: ['vendor', 'commons', 'index']
 })

剛開始一直出錯，是因為我沒有復(fù)寫default，也沒有default:false，所以其實默認(rèn)配置有將所有的模塊的公共部分分離到某個文件中，但我在HtmlWebpackPlugin中的chunks中又沒有添加，所以要么覆寫原來的默認(rèn)配置，要么就關(guān)閉默認(rèn)配置。

第四步：配置postcss autoprefixer

在根目錄下創(chuàng)建一個文件`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下面自動為true

以上只是在原有項目的基礎(chǔ)上對webpack 4的升級，還有一些特性并沒有用到，所以沒有提及，比如sideEffects、javascript/auto javascript/esm javascript/dynamic、webassembly/experimental等等，有機會再去探索。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

webpack4的遷移的使用方法

推薦度：

點擊下載本文 文檔為doc格式

標(biāo)簽：使用 webpack4 webpack4的遷移的使用方法

熱門焦點

webpack4的遷移的使用方法

webpack4的遷移的使用方法

webpack4的遷移的使用方法

最新推薦

猜你喜歡

熱門推薦