本地开发环境不需要压缩css,配置保持不变;
生产中压缩css可以优化产出代码，故只在生产环境进行css压缩;
在开发和生产分别配置如下：
1.在生产配置中配置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相关配置：
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.开发环境配置css加载
[webpack.prod.js]：
module: {
rules: [
{
test: /\.css$/,
// loader 的执行顺序是：从后往前
loader: ['style-loader', 'css-loader', 'postcss-loader'] // 加了 postcss
},
{
test: /\.less$/,
// 增加 'less-loader' ，注意顺序
loader: ['style-loader', 'css-loader', 'less-loader']
}
]
},
