1.前言
上一章咱们学习如何来处理 html 文件，打包、hash戳咱们已经了解了，那么接下来这一章咱们要学习的是如何来处理样式，比如：css、less这些应该如何处理呢？那么，让我们一起来学习吧！！！
我们知道，webpack 默认是支持 js 模块的，那么，我们现在 src 目录下面建立一个 css 文件，然后在 js 中引入css文件，当然有小伙伴会问了，为什么不在 html中引入 css呢？ 我们的 html 文件只是一个模板，在它里面引入css的话它会原封不动的输出，我们的css并不会打包到build目录下面，所以这种方法是不行的。
首先我们新建一个css文件，然后在js文件中引入我们的css文件，如上图。这个时候我们启动一下服务来看一下：（ npm run dev）这个时候是会报错的，提示我们说不支持，因为这个东西默认不是一个模块，你需要一个合适的 loader去解析这个模块。
loader的作用：把我们的源代码进行转化，可以帮我们转化出来一个模块。
2.模块配置
如上所述，这个时候就需要来配置我们的 css模块了。
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html',
filename: 'index.html',
minify: {
removeAttributeQuotes: true,
collapseWhitespace: true
},
hash: true
})
],
module: { //模块
rules: [ //规则
// css-loader(处理我们的css，主要负责解析 @import这种语法的)
// style-loader 它是把 css 插入到 head 的标签中
// loader的特点： 希望单一性（一个loader处理一件事情）
// loader 的用法 ：一个 loader 用字符串表示，多个loader 需要用 []表示
// loader 的顺序，默认是从右向左执行 从下到上执行
// loader 还可以写成对象的方式，可以传参数
{
test: /\.css$/, //用正则来匹配以 css 结尾的文件
use: [
//我们要先处理 css样式，在插入到 head标签中去
'style-loader',
'css-loader'
]
}
]
}
上面的配置已经详细的介绍了咱们用到的这两个loader的作用，那么现在让我们重启一下服务，看一下loader起作用了吗：
运行结果如图，为什么没有找到呢，那是因为我们只是配置了 loader，但是还没有安装这两个loader，所以找不到，安装命令：
yarn add css-loader style-loader -D. 安装好之后再重新启动服务：这个时候已经运行正常了，那么，让我们来访问一下页面： 可以看到，页面的背景现在应景变成了红色，和咱们设置的颜色是一样的，说明 css-loader 运行成功。 打开调试工具，可以看到我们的样式是插入到head标签中的，这说明我们的 style-loader也是起作用的。
3.css-loader （主要解析 @import语法）
配置文件中也说明了这个，现在来让我们试一试。
- 在 src 目录下面在新建一个 a.css 文件
- 然后将a.css文件引入到index.css文件中：如图
重启服务：
如图，和我们设置的样式是一样的，说明这两个loader都运行成功。
4.处理less文件
- css文件已经可以处理了，如何处理less文件呢，这个时候我们就需要先安装 less 和 less-loader来处理less了。
yarn add less less-loader -D - 安装好之后，到配置文件中配置我们的less规则。
module: { //模块
rules: [ //规则
{
test: /\.css$/, //用正则来匹配以 css 结尾的文件
use: [
'style-loader',
'css-loader'
]
},
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader' //把 less --->转换为 css
]
}
]
}
- 在src目录下面新建一个 index.less文件，如图：
- 在index.js中引入我们的less文件：
- 重新启动服务：（npm run dev）
这个时候我们能够看到样式已经生效，说明 less文件可以加载了。
5.抽离css样式
从上图我们可以看到，我们所写的css、less样式都会放到head标签中，那么我们如何单独把css的内容抽离出来用link标签的形式引入呢：
- 首先，先安装抽离
css的插件 :yarn add mini-css-extract-plugin -D - 安装好之后，在 配置文件中 引入：
let MiniCssExtractPlugin = require('mini-css-extract-plugin') - 然后在配置文件中的插件配置中进行配置：
plugins: [ //数组， 放着所有的 webpack插件
new MiniCssExtractPlugin({
filename:'main.css', //抽离出来的css的文件的名字
})
],
- 然后选择，到底是 css 文件要抽离，还是 less 文件要抽离，那个要抽离就给那个 加上抽离插件的内置loader。（在模块中的 css 、less 规则中加 ）：如下：
module: { //模块
rules: [ //规则
{
test: /\.css$/, //用正则来匹配以 css 结尾的文件
use: [
MiniCssExtractPlugin.loader,//这个loader的作用是：抽离出来 css然后用 link 标签引入到 模板文件中
'css-loader'
]
 },
{
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,//这个loader的作用是：抽离出来 css然后用 link 标签引入到 模板文件中
'css-loader',
'less-loader' //把 less --->转换为 css
]
}
]
}
- 运行
npm run build命令，看一下是否单独抽离出来css文件：
可以看到，我们的css文件已经被单独抽离出来了，启动一下服务看一下页面效果：
现在已经变成抽离出来的css文件是用link标签来引入的。
6.自动添加前缀
css有些样式为了支持每个浏览器，需要添加前缀，接下来我们学习一下如何自动添加前缀。 我们先来试一下现在的效果，我们在less文件中添加样式：
执行打包命令可以看到打包出来的main.css文件中样式并没有添加前缀：
- 添加自动添加前缀的插件和 loader ：
yarn add postcss-loader autoprefixer -D然后进行配置：加前缀的 loader 是在 解析css的 loader之前，配置css规则中的配置：
module: {
rules: [
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader' //自动添加前缀的 loader
]
},
{
// 可以处理 less 文件。
test: /\.less$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader', //自动添加前缀的 loader
'less-loader', //把 less ->转换为 css
]
},
]
},
这个时候你启动服务的话是会报错的（因为它需要一个配置文件）：
- 需要新建一个自动增加前缀插件的配置文件，文件名叫：
postcss.config.js（在项目的根目录下建立） ，这个配置文件里面的内容需要导出自动加前缀的插件：
module.exports = {
plugins: [
require('autoprefixer')
]
}
那么，这个时候我们在来打包看一下：
已经将我们的样式前缀添加上了。
7.压缩css代码（优化css资源）
根据上图我们可以看到，这个时候的css代码是没有打包的。
- 优化 css 的插件：
optimize-css-assets-webpack-plugin，安装插件。 - 然后在配置文件中引入这个插件
let OptimizeCss = require('optimize-css-assets-webpack-plugin')
- 这个插件并不是在 配置文件中的 插件配置中使用，而是 要新建一个优化项，在优化项中使用插件。
module.exports = {
optimization: { //优化项
minimizer: [
new OptimizeCss() //优化css
]
},
plugins: [ //数组， 放着所有的 webpack插件
new HtmlWebpackPlugin({
template: './src/index.html', //模板文件（html文件）的位置
filename: 'index.html', //打包后的文件名字
minify: { //压缩 html 文件
removeAttributeQuotes:true, //删除属性的双引号
collapseWhitespace:true //折叠空行，变成一行
},
hash: true,
}),
new MiniCssExtractPlugin({
filename:'main.css', //抽离出来的css的文件的名字
})
],
}
让我们打包一下，看一下效果：
我们打包出来的css已经被压缩。但是，这个时候我们可以看一下我们的 js 文件，js 文件已经恢复到原样了，并没有被打包。
- 这个时候 css 已经优化好, 但是 js 不能够打包了。所以用了这个插件之后，必须使用
uglifyjs-webpack-plugin这个插件 来 压缩 js. 先要安装插件。 - 然后在优化项中配置这个插件：
optimization: { //优化项
minimizer: [
new UglifyJsPlugin({
cache: true, //是否用缓存
parallel: true, //是否是并发打包（一起压缩多个）
sourceMap: true
}),
new OptimizeCss() //优化css
]
},
运行命令，打包看结果：
js又重新打包好了，css也可以打包了。
