module: {
rules: [
{
test: /\.css/,//匹配以CSS结尾的文件
use: [‘style-loader‘,‘css-loader‘],//执行过程是从右至左,这两个顺序不能调换
先使用css-loader打包到js里,在使用style-loader插入到html里面;
如果只有一个loader,不需要使用use;可以直接写成以下方式
loader:‘css-loader‘
},
{
test: /\.js/,
use:
loader: ‘‘,
options: {
// 这里可以指定一个 publicPath
// 默认使用 webpackOptions.output中的publicPath
publicPath: ‘../‘
},
},
}
]
}
如果单独提取css文件,将一些css打包到一个文件里面,那么就得安装插件mini-css-extract-plugin,这是将CSS提取为独立的文件的插件
如果打包后想压缩css,还得引入optimize-css-assets-webpack-plugin插件
如果想做css兼容,额,就是在加css前缀,那么需要引入postcss-loader
const MiniCssExtractPlugin= require(‘mini-css-extract-plugin‘)
const OptimizeCSSAssetsPlugin = require(‘optimize-css-assets-webpack-plugin‘);
module: {
rules: [
{
test: /\.css/,
use: [miniCssExtractPlugin.loader,‘css-loader‘],
},
{
test: /\.less/,
use: [miniCssExtractPlugin.loader,‘css-loader‘,‘less-loader‘],
}
]
},
plugins:{
new MiniCssExtractPlugin({
filename: ‘‘//可以不写,写了以后打包出来的文件名就是这里定义的文件名
})
new OptimizeCSSAssetsPlugin()
}