webpack之css资源的配置
webpack 中只能识别 js 文件和 json 格式的文件,如果我们想编译引入 css 样式文件的话,我们就需要进行一些配置。
- css 文件的识别配置
// 首先我们需要安装两个loader 用来解析识别 css 文件
// css-loader 用来解析识别 css 文件,style-loader 用来将 css 文件中的样式已 <style></style> 标签的形式引入到 <head>标签中,使其生效
yarn add css-loader style-loader -D
// 第二步,将 css 文件使用 import 语法导入到入口文件中
// index.js
import './style.css'
// 第三步,对 webpack.config.js 进行配置, use 里面的 loader 的写法是哪个先开始用哪个就写在后面(要先使用 css-loader 识别 css 文件,再使用 style-loader将样式引入到 head 标签中 )
// webpack.config.js
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
- less 文件的配置(同理)
yarn add less-loader less -D
// less-loader 既可以解析识别 less 文件,也可以解析识别 css 文件
// 配置文件 webpack.config.js
module: {
rules: [
{
test: /\.(css|less)$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
}
]
}
- 抽离 css
以上的配置 css 的引入都是通过 style 标签进行引入的,但我们现在想 css 样式作为一个单独的文件,使用 link 标签去引入
// 安装依赖包,该依赖包必须是基于 webpack5 下面去安装
yarn add mini-css-extract-plugin -D
// webpack.config.js 配置文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
plugins: [
new MiniCssExtractPlugin({
filename: 'styes/[contenthash].css' // css 文件的输出路径
})
],
module: {
rules: [
{
test: /\.(css|less)$/,
use: [
MiniCssExtractPlugin-loader,
'css-loader',
'less-loader'
]
}
]
}
}
- 压缩 css
// 安装依赖
yarn add css-minimizer-webpack-pugin -D
// webpack.config.js 配置文件
const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-pugin')
module.exports = {
mode: 'production', // 一定要配置成为生产模式
optimization: {
minimizer: [
new CssMinimizerWebpackPlugin()
]
}
}