webpack5和webpack4的一些區別

自動清除打包目錄

• webpack4

// bash
npm i clean-webpack-plugin -D
//webpack.config.js
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
module.exports = {plugins: [new CleanWebpackPlugin()}
}

• webpack5

module.exports = {output: {clean: true}
}

topLevelAwait

webpack5允許在模塊的頂級代碼中直接使用await，比如：

function delay(time) {return new Promise((resolve, reject) => {setTimeout(() => {resolve("resolve")}, time)})
}
var res = await delay(1000)
console.log('res: ', res);
export default res;

由于topLevelAwait還未成為正式標準(官方文檔)，所以需要在webpack.config.js配置一下：

module.exports = {experiments: {topLevelAwait: true}
}

打包體積優化

webpack5對模塊的合并、作用域提升、tree shaking 等處理更加智能和簡潔

打包緩存優化

webpack4需要使用cache-loader打包結果來優化之后的打包性能webpack5默認就開啟了打包緩存(官方文檔)，無需再安裝cache-loader

資源模塊loader

webpack5不需要再安裝 file-loader、url-loader、raw-loader 處理靜態資源文件了(官方文檔)

• webpack4

npm i file-loader url-loader -D   // 將小文件轉為base64的時候需要用到file-loader

module.exports = {module: {rules: [{test: /\.(png|jpe?g|gif)$/i,use: [{loader: 'url-loader',options: {limit: 10240, // 低于10k的圖片直接轉為base64esModule: false,outputPath: 'images',name: '[name][contenthash:4].[ext]',}},]}]}
}

• webpack5

module.exports = {module: {rules: [{test: /\.(png|jpe?g|gif)$/i,type: 'asset',parser: {dataUrlCondition: {maxSize: 10 * 1024 // // 低于10k的圖片直接轉為base64}},generator: {filename: 'assets/img/[hash:4][ext]', 這個配置的優先級高于output的assetModuleFilename}}]}
}