在生产环境中如果使用style-loader将css代码嵌入到html文件中可能会发生意外,所以在生产环境下,需要对css代码进行抽离,抽离过后,html会已外链的形势引入css。开发环境可以依然使用style-loader。
一、依赖安装
mini-css-extract-plugin用于抽离css
optimize-css-assets-webpack-plugin用于压缩css文件
二、配置
在生产环境配置如下
// webpack.prod.js
const { merge } = require('webpack-merge')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const TerserJSPlugin = require('terser-webpack-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const webpackCommonConf = require('./webpack.common.js')
module.exports = merge(webpackCommonConf, {
// ...
module: {
rules: [
// ...
// 抽离 css
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader, // 注意,这里不再用 style-loader
'css-loader',
'postcss-loader'
]
},
// 抽离 less --> css
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader, // 注意,这里不再用 style-loader
'css-loader',
'less-loader',
'postcss-loader'
]
}
]
},
// ...
})
// webpack.prod.js
const { merge } = require('webpack-merge')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const TerserJSPlugin = require('terser-webpack-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const webpackCommonConf = require('./webpack.common.js')
module.exports = merge(webpackCommonConf, {
// ...
plugins: [
// ...
// 抽离 css 文件
new MiniCssExtractPlugin({
filename: 'css/main.[contenthash:8].css' // 文件输出路径
})
],
optimization: {
// 压缩 css
minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})], // 前者压缩js, 后者压缩css
}
})