打包css资源
加载css资源需要安装style-loader，css-loader库
配置如下：
module: {
rules: [
// 在rules中写详细的loader配置
// 打包css资源
{
// 正则表达式,匹配那些文件，匹配以.css结尾的文件
test: /\.css$/,
// 使用哪些loader进行处理
use: [
// 创建style标签，将js的样式资源插入进去，添加到head中生效
'style-loader',
// 将css文件变成commonjs模块加载到js中，里面内容是样式字符串。
'css-loader'
]
}
]
},注意：
use数组中loader执行顺序：从右到左，从下到上，依次执行。
示例：
//index.html
<body>
<div>webpack5学习</div>
<!-- 注释 -->
<div>html压缩</div>
<div class="box1"></div>
</body>
//index.js中引入css文件
import './css/style1.css'
function add(a, b) {
return a + b;
}
console.log(add(1, 3))
//css文件
.box1 {
width: 100px;
height: 100px;
background-color: aqua;
margin: 10px;
}
执行webpack命令
可以看到编译了css文件
输出文件中也嵌入了css文件
在浏览器中运行打包输出的index.html文件，可以看到样式已经嵌入到style标签中了
打包less资源
安装 less-loader，less库
配置如下：
// 不同的文件必须配置不同的loader处理，所以less和css文件的处理不能放在一起
//加载less文件
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
// 将less文件编译成css文件
// 需要下载less-loader和less库
'less-loader'
]
}示例：
//html文件
<body>
<div>webpack5学习</div>
<!-- 注释 -->
<div>html压缩</div>
<div class="box1"></div>
<div class="box2"></div>
</body>
//js文件
import './css/style1.css'
import './css/style2.less'
function add(a, b) {
return a + b;
}
console.log(add(1, 3))
//less文件
.box2{
width: 100px;
height: 100px;
background-color: red;
margin: 10px;
}执行webpack命令
可以看到打包了less文件
输出文件中也嵌入了less文件
在浏览器中运行，可以看到效果
样式文件提取
从上面的例子中可以看到打包之后，css和less文件都嵌入在js中，这样js文件会很大，导致加载速度变慢，我们可以提取样式文件使样式文件在单独的文件夹中。
分析：
因为webpack打包时，css-loader会将css文件嵌入到js中，然后再经过style-loader创建style标签，将样式插入，所以打包之后的css样式是在js文件，js太大影响加载速度和性能。
在提取时需要mini-css-extract-plugin插件，并且不能使用style-loader。需要使用mini-css-extract-plugin自己的loader替代style-loader
安装mini-css-extract-plugin
css文件的提取
配置
//plugins中的配置
// 插件
plugins: [
// 详细的plugins配置
// 创建HtmlWebpackPlugin对象
new HtmlWebpackPlugin({
// 以./src/index.html为模板，并自动引入打包输出的所有资源（js或者css）
template: './src/index.html',
minify: {
// // 移除空格
// collapseWhitespace: true,
// // 移除注释
// removeComments: true
}
}),
new MiniCssExtractPlugin({
// 对css文件重命名
filename: 'css/built.css'
}),
],
//module中rules的配置
{
// 正则表达式,匹配那些文件，匹配以.css结尾的文件
test: /\.css$/,
// 使用哪些loader进行处理
use: [
// 创建style标签，将js的样式资源插入进去，添加到head中生效
// 'style-loader',
// 将css文件提出来不能使用style-loader，需要使用mini-css-extract-plugin自己的loader
// 作用将js中的css提取成单独文件
MiniCssExtractPlugin.loader,
// 将css文件变成commonjs模块加载到js中，里面内容是样式字符串。
'css-loader'
]
},执行webpack命令
可以看到输出文件中生成了css文件夹，并且在输出的index.html文件中引入了css文件
less文件的提取
//加载less文件
{
test: /\.less$/,
use: [
// 'style-loader',
MiniCssExtractPlugin.loader,
'css-loader',
// 将less文件编译成css文件
// 需要下载less-loader和less库
'less-loader'
]
}运行webpack命令之后，可以发现less文件也被打包到built.css文件中了
压缩文件
安装optimize-css-assets-webpack-plugin插件
引入optimize-css-assets-webpack-plugin插件
// 压缩css文件的插件
const OptimizeCssAssetsWebpackPlugin =require('optimize-css-assets-webpack-plugin')创建optimize-css-assets-webpack-plugin对象
// 压缩css文件
new OptimizeCssAssetsWebpackPlugin()执行webpack命令，可以看到输出的css文件被压缩了