今天继续填webpack坑啦。继上次讲了新建webpack5项目后，今天聊一聊webpack5是如何处理css的。
目标
- 编译不通类型的css
- css代码自动加前缀
- 抽离css文件
- 压缩css
知识点脑图
项目中用到的代码
编译不同类型的css
- 安装插件
yarn add style-loader css-loader -D - 在index.js中引入index.css文件
require('./index.css') - 配置插件：配置css文件的处理
module: {
rules: [
{
test: /\.css$/, // 针对css后缀的文件，用use中的loader
use: [ // 从后向前依次使用下面列出的两个loader
'style-loader',
'css-loader'
]
}
]
}
- 按照以上步骤配置完成后，重启开发服务器 或 重新打包编译，index.css的样式就生效了
- 打包和编译less文件
- 安装 less 和 less-loader
yarn add less less-loader -D- 新建一个index.less，写上样式；在index.js中引入index.less require('./index.less')
- 配置插件，加入对less文件的处理。重启本地服务，index.less中写的样式就生效了。其他关于scss和stylus的处理，也可参照less的处理方法。
{
test: /\.less$/, //针对less后缀的文件，用use中的loader
use: [
'style-loader',
'css-loader',
'less-loader'
]
}
给css属性加上前缀
- css属性加前缀是通过
postcss-loader和autoprefixer共同完成的，其中autoprefixer需要设置Browserslist - 安装loader postcss-loader 和 autoprefixer
yarn add postcss-loader autoprefixer - 在根目录添加 postcss.config.js 文件，文件填以下内容
module.exports = {
plugins: [require('autoprefixer')]
}
- 将postcss-loader加到
webpack.config.js中
// 在配置css-loader的地方，在它后面加上postcss-loader
rules: [
{
test: /\.css$/, // 针对css后缀的文件，用use中的loader
use: [ // 从后向前依次使用下面列出的两个loader
// 'style-loader',
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader'
]
}, {
test: /\.less$/, //针对less后缀的文件，用use中的loader
use: [
// 'style-loader',
MiniCssExtractPlugin.loader,
'css-loader',
'less-loader',
'postcss-loader'
]
}
]
- 以上配置了之后，dev环境或者打包后的代码，autoprefixer都没有生效，因为 Browserslist没有配。此时在根目录下新增一个
.browserslistrc文件，配置 browsersList
last 2 version
> 1%
- 大功告成，后面无论是本地环境还是打包后的代码，css3属性，都会加上兼容性的前缀。下面是打包后的css代码中的transform属性
.container .trans {
// 其他代码
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
抽离css文件
- 安装 mini-css-extract-plugin,
yarn add mini-css-extract-plugin -D - 配置插件。 1. 在plugins中添加 mini-css-extract-plugin
2. 修改 style.loader
// 引入抽离css的plugin
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// plugin数组中，再加一个MiniCssExtract实例
new MiniCssExtractPlugin({
filename: 'main.css'
})
// loader中，使用css-loader的地方，改一下
rules: [
{
test: /\.css$/, // 针对css后缀的文件，用use中的loader
use: [ // 从后向前依次使用下面列出的两个loader
// 'style-loader',
MiniCssExtractPlugin.loader,
'css-loader'
]
}, {
test: /\.less$/, //针对less后缀的文件，用use中的loader
use: [
// 'style-loader',
MiniCssExtractPlugin.loader,
'css-loader',
'less-loader'
]
}
]
- 重新打包 npm run build, 会发现输出目录的下面多出来一个main.css文件
压缩css
- optimize-css-assets-webpack-plugin是用来压缩css的plugin
- 配置此插件。进行以下配置后，css会进行压缩，但是js不会，因为 设置minimizer时，将webpack默认的配置覆盖掉了。
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
optimization: {
minimizer: [
new OptimizeCssAssetsWebpackPlugin()
]
}
- 重新打包 npm run build
结语
今天关于webpack5对css的处理就介绍到这里了，后面会继续更新webpack5编译和打包js文件
