webpack-plugin
阿新 • • 發佈：2020-09-10
plugins:
clean-webpack-plugin:
clean-webpack-plugin用於在打包前清理上一次專案生成的bundle檔案，它會根據output.path自動清理資料夾；這個外掛在生產環境用的頻率非常高，因為生產環境經常會通過hash生成很多bundle檔案，如果不進行清理的話每次都會生成新的，導致資料夾非常龐大；這個外掛安裝使用非常方便： 安裝：npm i -D clean-webpack-plugin
配置：
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
//其他配置
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
template: './public/index.html',
filename: 'index.html',
})
]
}
mini-css-extract-plugin：
我們之前的樣式都是通過style-loader插入到頁面中去，但是生產環境需要單獨抽離樣式檔案，mini-css-extract-plugin就可以幫我從js中剝離樣式：
安裝：
npm i -D mini-css-extract-plugin
配置：
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
//其他配置
module: {
rules: [
{
test: /\.less/,
use: [{
loader: isDev ? 'style-loader' : MiniCssExtractPlugin.loader
},{
loader: 'css-loader'
},{
loader: 'less-loader'
}]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].[hash:8].css",
})
]
}