本地開(kāi)發(fā)環(huán)境不需要壓縮css,配置保持不變;
生產(chǎn)中壓縮css可以?xún)?yōu)化產(chǎn)出代碼，故只在生產(chǎn)環(huán)境進(jìn)行css壓縮;
在開(kāi)發(fā)和生產(chǎn)分別配置如下：
1.在生產(chǎn)配置中配置css抽離壓縮加載：
抽離css文件：
- 安裝分離css插件 mini-css-extract-plugin
- 在plugins中 新增 抽離css文件的 配置
壓縮css文件：
- 安裝壓縮css插件 terser-webpack-plugin、optimize-css-assets-webpack-plugin
- 在optimization中 新增 壓縮css 的配置
css加載：
- 在loader中 配置以插件的形式加載
[webpack.prod.js]只展示與css相關(guān)配置：
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const TerserJSPlugin = require('terser-webpack-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
module.exports = smart(webpackCommonConf, {
mode: 'production',
module: {
rules: [
// 抽離 css
{
test: /\.css$/,
loader: [
MiniCssExtractPlugin.loader, // 注意，這里不再用 style-loader
'css-loader',
'postcss-loader'
]
},
// 抽離 less --> css
{
test: /\.less$/,
loader: [
MiniCssExtractPlugin.loader, // 注意对雪，這里不再用 style-loader
'css-loader',
'less-loader',
'postcss-loader'
]
}
]
},
plugins: [
// 抽離 css 文件
new MiniCssExtractPlugin({
filename: 'css/main.[contentHash:8].css'
})
],
optimization: {
// 壓縮 css
minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
}
})
2.開(kāi)發(fā)環(huán)境配置css加載
[webpack.prod.js]：
module: {
rules: [
{
test: /\.css$/,
// loader 的執(zhí)行順序是：從后往前
loader: ['style-loader', 'css-loader', 'postcss-loader'] // 加了 postcss
},
{
test: /\.less$/,
// 增加 'less-loader' 坦报，注意順序
loader: ['style-loader', 'css-loader', 'less-loader']
}
]
},
