webpack入门学习笔记05 —— 使用webpack打包编译css文件

程序铺子
2,413 阅读6分钟

1. 写在前面

在前面的博客中，对webpack打包项目进行了简单介绍，而且都是关于打包编译 .js 文件的介绍。我们知道在一个基于webpack的项目中，肯定不止是 .js 文件，还有 .html 、.css、.png 等文件，在后面的博客中会给大家一一讲述，在这篇博客中，我们就介绍如何使用webpack打包编译 .css 文件。

主要内容包括：

  • 如何在项目中引入 .css 文件

  • 打包编译 .css 文件

  • 打包编译 .less 文件

  • 将css代码抽离为单个文件

  • 给打包编译后的css3属性添加相关前缀

  • 压缩编译后的 .css 文件

2. 如何在项目中引入 .css 文件

之前我们提到过，webpack会对项目中的项目文件进行打包编译，然后将生成的文件挂载到一个 .html 模板文件中。这个时候如果要引入css样式，你可能会想：我将css样式直接写到 .html 模板文件中，或者将 .css 文件挂载到模板文件中，不就行了吗。例如下面的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            background-color: red;
            color: yellow;
        }
    </style>
</head>
<body>

    <h1>这是一个模板文件</h1>
    
</body>
</html>

首先从功能上分析，这种方式是可行的，无论你是使用 yarn dev 来启动开发服务器，还是使用 yarn build 来打包编译项目，最终你写的样式都是会存在，会起作用的。但是这种方法非常不好，也不规范，所以非常不推荐使用这种方式。那么该怎么来引入css代码呢？

如果你是使用 Vue脚手架 或者 React脚手架 来构造项目的话，那么直接参考他们的官方教程来写css样式即可，如果你是从零手动搭建的项目，那么可以在 .js 文件中引入 .css 文件，例如下面的实例：

// index.js 文件
console.log('我是 index.js 文件');

require('./index.css')  // 引入 .css 样式文件

require('./b.less')     // 引入 .less 样式文件

/* index.css 文件 */
body {
    background-color: red;
    color: yellow;
}

/* b.less 文件 */
body {
    border: 5px solid #45454;
    div {
        font-size: 20px;
        font-weight: bolder;
    }
}

现在我们已经将 .css 文件和 .less 文件引入到项目中，但是这个时候，如果我们启动本地开发服务器或者打包编译项目，肯定会报错。

这是因为我们还没有进行相关的配置，webpack还不知道如何处理这些引入的文件。所及接下来要说的就是如何进行配置，使得webpack可以进行打包编译样式文件。

3. 打包编译 .css 文件

webpack之所以能够打包编译项目中各式各样的文件，是因为它借助了很多功能强大的插件或者模块。所以如果我们想打包编译 .css 文件，首先安装两个loader模块： css-loader 和 style-loader 。安装命令如下：

yarn add css-loader style-loader -D

安装完成之后，我们要在 webpack.config.js 文件中进行配置，这里我们先给出标准的配置代码，然后再详细讲解（重点关注有注释的部分）：

let path = require("path");
let HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
    mode: "development",    
    entry: "./src/index.js",   
    output: {       
        filename: "index.js",   //
        path: path.resolve(__dirname, "build")   
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            minify: {
                removeAttributeQuotes: true,
                collapseWhitespace: true
            },
            hash: true
        }),
    ],
    module: {       // 配置 webpack 使用到的模块
        rules: [
            {
                test: /\.css$/,     // 针对 .css 结尾的文件，使用下面的loader进行处理
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ],
    }
}

在上面代码中，我们增添了 module 属性，该属性是一个对象，它里面又有一个 rules 属性，该属性是一个数组。在这个数组中，我们可以配置很多规则，分别指定对各种文件处理的程序（比如使用哪种loader进行处理等）。这里我们首先配置对 .css 的处理规则。

在 rules 数组中配置规则很简单，直接添加一个对象即可。如上面代码所示，我们要配置处理 .css 文件的规则，可以添加以下对象：

{
    test: /\.css$/,     // 针对 .css 结尾的文件，使用下面的loader进行处理
    use: [
        'style-loader',
        'css-loader'
        ]
}

该对象有两个属性：test 和 use

  • test 属性是用来匹配文件的，一般我们使用正则表达式来匹配文件，上面代码中 /\.css$/ 就是匹配以 .css 结尾的文件。

  • use 属性指定使用哪些程序，来对匹配到的文件进行处理。该属性是一个数组，这是因为对一个文件进行处理的时候，可能会用到多种程序。比如上面的代码中，我们制定使用 style-loader 和 css-loader 两种程序来处理 .css 文件，就需要将这两个程序写到数组中。

    需要注意的是，这个数组中程序的顺序不能随便写，因为对文件进行处理的时候，webpack会按照从后向前的顺序，依次使用指定的程序来处理文件。

    比如在处理index.css文件的时候，要先使用 css-loader 处理css语法，然后在使用 style-loader 将处理后的css挂载到 index.html 模板文件中。在写 use 属性的时候，就要将 style-loader 写在前面，将 css-loader 写在后面。

    最后还想说的一点是，该属性中不仅可以写字符串，还可以写对象，用来更深次地配置处理文件的loader程序。比如：如果你想将处理好的 css 挂载到模板文件的顶部，可以这样配置：

    {
    test: /\.css$/,
    use: [
        {
            loader: 'style-loader',
            options: {
                insertAt: 'top'	// 将编译后的css挂载到模板文件的顶部
            }
        },
        'css-loader'
    ]
},

    如果在指定属性的时候不知道如何书写，可以这些loader程序的官方文档，比如 style-loaderde 官方文档 。

配置完这些规则之后，使用 yarn dev 启动本地开发服务器或者使用 yarn build 对项目进行打包编译，webpack就可以顺利地使用我们配置的规则处理 .css 文件了。

4. 打包编译 .less 文件

如果项目中使用到了 less语法（一门 CSS 预处理语言 ） ，我们就要进行相关配置 .less 文件的处理规则。和处理 .css 文件类似，应该安装两个模块：less 和 less-loader。安装命令如下：

yarn add less less-loader -D

配置的方法和上面讲到的方法如出一辙，所以这里直接给出配置的代码（重点关注有注释的部分）：

let path = require("path");
let HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
    mode: "development",   
    entry: "./src/index.js",    
    output: {        
        filename: "index.js",    
        path: path.resolve(__dirname, "build")    
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            minify: {
                removeAttributeQuotes: true,
                collapseWhitespace: true
            },
            hash: true
        }),
    ],
    module: {       // 配置 webpack 使用到的模块
        rules: [
            {
                test: /\.css$/,     // 针对 .css 结尾的文件，使用下面的loader进行处理
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                test: /\.less/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'       // less-loader将less语法转成常规的css语法
                ]
            }
        ],
    }
}

配置完成之后，重启开发服务器或者重新打包编译，.less 文件就可以顺利地被编译。

5. 将css代码抽离为单个文件

如前面所提到的那样，webpack会打包编译 .css 文件或者 .less 文件，将处理后的css代码挂载到模板文件中，但是有的时候我们不希望这样。我们希望将处理后的css代码输出到一个指定的文件中，然后在模板文件中 自动引入 该文件。如果要达到这个目的，可以进行如下配置：

首先安装一个插件 mini-css-extract-plugin， 安装命令如下：

yarn add mini-css-extract-plugin -D

安装完成之后，直接进行如下配置即可（重点关注有注释的部分）：

let path = require("path");
let HtmlWebpackPlugin = require("html-webpack-plugin")
let MiniCssExtract = require('mini-css-extract-plugin') // 引入插件

module.exports = {
    mode: "production",
    entry: "./src/index.js",
    output: {
        filename: "index.js",
        path: path.resolve(__dirname, "build")
    },
    plugins: [		// 配置插件
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            minify: {
                removeAttributeQuotes: true,
                collapseWhitespace: true
            },
            hash: true
        }),
        new MiniCssExtract({ 		// 创建该插件的实例
            filename: 'main.css' 	// 指定输出的css文件的文件名
        })
    ],
    module: {
        rules: [{
                test: /\.css$/,
                use: [
                    MiniCssExtract.loader, // 配置规则，将处理后的css代码直接输出到指定文件中
                    'css-loader',
                    'postcss-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    MiniCssExtract.loader, // 配置规则，将处理后的css代码直接输出到指定文件中
                    'css-loader',
                    'less-loader',
                    'postcss-loader'
                ]
            }
        ]
    }
}

配置完成之后，直接 yarn build 进行打包编译项目，就会得到一个 main.css 文件，该文件中就是编译后的css代码，实例如下。

/* main.css 文件 */
body {
    color: yellow;
}
body {
    background-color: gray;
    transform: rotate(45deg)	/* 注意这一行css3代码，没有添加前缀，后面会提到 */
}
body {
  border: 5px solid #4545 4;
}
body div {
  font-size: 20px;
  font-weight: bolder;
}

关于这一块的更多配置，可以参考 mini-css-extract-plugin 官方文档

6. 给打包编译后的css属性添加相关前缀

如上面展示的 main.css 代码所示，打包编译后的代码中，对一些 CSS3 属性没有添加相应的前缀，这在一些情况下可能不能满足项目的需求。如果我们想要达到自动给编译后的 CSS3 属性添加前缀，可以进行如下配置：

首先安装两个loader程序： postcss-loader 和 autoprefixer 。安装命令如下：

yarn add postcss-loader autoprefixer -D

安装完成时候，首先配置 webpack.config.js 文件，实例如下（重点关注有注释的部分）：

let path = require("path");
let HtmlWebpackPlugin = require("html-webpack-plugin")
let MiniCssExtract = require('mini-css-extract-plugin')

module.exports = {
    mode: "production",  
    entry: "./src/index.js", 
    output: {  
        filename: "index.js",  
        path: path.resolve(__dirname, "build")  
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            minify: {
                removeAttributeQuotes: true,
                collapseWhitespace: true
            },
            hash: true
        }),
        new MiniCssExtract({
            filename: 'main.css'
        })
    ],
    module: {
        rules: [{
                test: /\.css$/,
                use: [
                    MiniCssExtract.loader,
                    'css-loader',
                    'postcss-loader'        // 给CSS3属性添加前缀
                ]
            },
            {
                test: /\.less$/,
                use: [
                    MiniCssExtract.loader,
                    'css-loader',
                    'less-loader',
                    'postcss-loader'    	// 给CSS3属性添加前缀
                ]
            }
        ]
    }
}

在上面代码中，我们指定了使用 postcss-loader 来处理 .css 和 .less 文件，但是现在webpack还不能自动给CSS3属性添加前缀，我们还需要进行配置postcss-loader。在项目根目录下创建 postcss.config.js 文件，在里面书写以下配置代码即可：

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

这个时候打包编译，webpack就可以自动给CSS3属性添加前缀了，实例如下：

/* main.css 文件 */
body {
    color: yellow;
}
body {
    background-color: gray;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg)
}
body {
  border: 5px solid #4545 4;
}
body div {
  font-size: 20px;
  font-weight: bolder;
}

7. 压缩编译后的 .css 文件

在上一节中，我们可以看到，抽离出来的 main.css 文件没有进行压缩，但是很多项目在打包的时候，都需要对 .css 文件进行压缩以节省体积。要达到这个目的，可以进行如下配置：

首先安装一个插件：optimize-css-assets-webpack-plugin 。安装命令如下：

yarn add optimize-css-assets-webpack-plugin -D

安装完成之后，直接在 webpack.config.js 进行如下配置即可（重点关注有注释的部分）：

let path = require("path");
let HtmlWebpackPlugin = require("html-webpack-plugin")
let MiniCssExtract = require('mini-css-extract-plugin')
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');    // 引入插件

module.exports = {
    optimization: {     					// 配置webpack的优化项
        minimizer: [    					// 配置最小值优化项
            new OptimizeCSSAssetsPlugin()   // 声明css优化插件的实例
        ]
    },
    mode: "production",  
    entry: "./src/index.js", 
    output: {  
        filename: "index.js",  
        path: path.resolve(__dirname, "build")  
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
            minify: {
                removeAttributeQuotes: true,
                collapseWhitespace: true
            },
            hash: true
        }),
        new MiniCssExtract({
            filename: 'main.css'
        })
    ],
    module: {
        rules: [{
                test: /\.css$/,
                use: [
                    MiniCssExtract.loader,
                    'css-loader',
                    'postcss-loader'       
                ]
            },
            {
                test: /\.less$/,
                use: [
                    MiniCssExtract.loader,
                    'css-loader',
                    'less-loader',
                    'postcss-loader'    
                ]
            }
        ]
    }
}

配置完成之后，再次进行打包编译项目，就会得到被压缩的 main.css 文件。

要提醒的是，在上述配置中，虽然我们指定webpack的模式为 生产模式（production）,该模式下，打包后的 .js 文件本应该被压缩，但是实际的情况却不是这样，得到的 .js 文件没有被压缩。

这是因为我们在配置 webpack优化项（optimization） 的时候，一些优化配置会覆盖webpack的默认配置。我们这里没有指定压缩 .js 文件，所以即使是在生产模式下进行打包编译，最后得到的 .js 文件依然是没有被压缩的。

如果要对 .js 文件进行压缩，也是非常简单，和配置 .css 文件压缩的如出一辙。具体配置如下：

首先安装一个插件：terser-webpack-plugin ，安装命令如下：

yarn add terser-webpack-plugin -D

然后进行和上面类似的配置（重点关注有注释的部分）：

let path = require("path");
let HtmlWebpackPlugin = require("html-webpack-plugin")
let MiniCssExtract = require('mini-css-extract-plugin')
let OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');   
let TerserJSPlugin = require('terser-webpack-plugin');      // 引入插件

module.exports = {
    optimization: {                         // 配置webpack的优化项
    minimizer: [                            // 配置最小值优化项
            new OptimizeCSSAssetsPlugin(),
            new TerserJSPlugin()            // 声明js压缩插件的实例
        ]
    },
    mode: "production",  
    entry: "./src/index.js", 
    output: {  
        filename: "index.js",  
        path: path.resolve(__dirname, "build")  
    },

    // 节省篇幅，后面的一些配置我就不写了，和上面的一样
}

现在再次进行打包，得到的 .js 文件就是被压缩的。

8. 写在最后

这篇博客的内容可能会多一点，主要讲解如何在webpack中配置对 .css 文件进行处理的规则。希望会对大家有所帮助。

上一篇: webpack入门学习笔记04 —— 安装和配置webpack开发服务器

下一篇: webpack入门学习笔记06 —— 使用babel打包编译js文件

avatar
文章
阅读
粉丝