webpack抽离css样式
- 安装插件:npm i mini-css-extract-plugin -D
- 在webpack.config.js文件中引入 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
- 代码片段
const MiniCssExtractPlugin = require('mini-css-extract-plugin');//引入插件
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,//使用 MiniCssExtractPlugin.loader
'css-loader',
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [
require('autoprefixer')(),
]
}
}//先于css-loader被处理
]
},
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,//使用 MiniCssExtractPlugin.loader
'css-loader',
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [
require('autoprefixer')(),
]
}
},
'less-loader'
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/main.css',//产出目录
}),
]