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'
                ]

![](https://user-gold-cdn.xitu.io/2019/11/14/16e68118b17b28e6?w=1477&h=705&f=jpeg&s=127105)            },
            {
                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也可以打包了。

今天我们就学到这里了！！！