处理css
要用到的loader css-loader
style-loader
,
css-loader
:解析@import等语法style-loader
:将css插入head中的style里
loader要放在module的rules里
loader的顺序从右到左,从下到上
module: { //模块
rules: [
{
test: /.css$/,
use: [{
loader: 'style-loader',
options: { //使css插入到head的顶部,不会覆盖模板中的样式
insertAt: 'top'
}
}, 'css-loader']
},
// 可以处理less文件
{
test: /.less$/,
use: [{
loader: 'style-loader',
options: {
insertAt: 'top'
}
}, 'css-loader', //@import
'less-loader' //less->css
]
}
]
}
Tips 若是style中css过多,可以选择抽离css外联link,使用mini-css-extract-plugin
let MiniCss = require('mini-css-extract-plugin') //抽离css的插件
....
plugins: [
new MiniCss({
filename: 'main.css', //抽离后的css文件
})
],
module: { //模块
rules: [ //规则
{
//
test: /\.css$/,
use: [
MiniCss.loader,
'css-loader'
]
},
{
//
test: /\.less$/,
use: [
MiniCss.loader, //替换style-loader,让他不放在style里,而是用link存放
'css-loader',
'less-loader' //
//当前会放在index.html的head中的style里,如果不想堆积太多,要抽离css样式
]
}
]
},
Tips 此时抽离出了css文件,可以压缩css文件使用optimize-css-assets-webpack-plugin
手动添加选项卡optimization
(优化项)与module
并列
optimization: { //优化项 压缩css
minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
// minimizer: [new OptimizeCSSAssetsPlugin({})],//使用这个后,发现js没被压缩
},
Tips 那我们还可以为代码添加浏览器前缀使用postcss-loader
,autoprefixer
加配置文件postcss.config.js
postcss-loader
一定要放在css-loader
之前,就像css-loader
一定要在style-loader
之前一样
module: { //模块
rules: [ //规则
{
//
test: /\.css$/,
use: [
MiniCss.loader,
'css-loader',
'postcss-loader', //注意先后
]
},
{
//
test: /\.less$/,
use: [
MiniCss.loader, //替换style-loader,让他不放在style里,而是用link存放
'css-loader',
'postcss-loader', //postcss-loader,autoprefixer自动添加浏览器前缀,需要配置文件
'less-loader' //
//当前会放在index。html的head中的style里,如果不想堆积太多,要抽离css样式
]
}
]
},
添加配置文件postcss.config.js
module.exports = {
plugins: [require('autoprefixer')] //使用该插件加前缀
}