感覺是突然之間，webpack4的消息就滿天飛了，聽說打包速度提高了很多，還有最大的噱頭是實現了零配置，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', // 對應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
}
}
舊版的鏈式調用也用數組替代。
1.x
style!postcss!less
2.x
use: [ "style-loader", "css-loader", "less-loader" ]
webpack2.x默認支持es6的模塊，所以在編譯時候沒有必要將它們先轉換CommonJS模塊再處理，babel-preset-es2015-webpack已經支持不轉換模塊中的import和export，只需要設置.babelrc
"presets": [
["es2015", { "modules": false }]
]另外就是插件的升級，運行時哪個插件報錯就升級哪個插件，屢試不爽。
2.x到4.x
第一步：版本升級
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是零配置，入口默認是src/index.js，出口是dist/，但由于項目是多頁面的，所以這一步并沒有省略，根據實際情況來。
第三步 移除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/, // 正則規則驗證，如果符合就提取chunks
name: "vendor" // 要緩存的分割出來的chunk名稱
},
default: {
chunks: 'all',
name: 'commons',
reuseExistingChunks: true
}
}
}
}
因為多個頁面，所以結合了html-webpack-plugin
new HtmlWebpackPlugin({
template: 'index.html',
chunks: ['vendor', 'commons', 'index']
})
剛開始一直出錯，是因為我沒有復寫default，也沒有default:false，所以其實默認配置有將所有的模塊的公共部分分離到某個文件中，但我在HtmlWebpackPlugin中的chunks中又沒有添加，所以要么覆寫原來的默認配置，要么就關閉默認配置。
第四步：配置postcss autoprefixer
在根目錄下創建一個文件`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插件
只需要設置optimization.minimize: true就行，production mode下面自動為true
以上只是在原有項目的基礎上對webpack 4的升級，還有一些特性并沒有用到，所以沒有提及，比如sideEffects、javascript/auto javascript/esm javascript/dynamic、webassembly/experimental等等，有機會再去探索。
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 51dongshi.com 版權所有
違法及侵權請聯系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務所王興未律師提供法律服務
