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

作者: 振礼硕晨 | 来源:发表于2019-06-30 10:32 被阅读0次

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入门学习笔记05 —— 使用webpack打包编译

1. 写在前面

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

3. 打包编译 .css 文件

4. 打包编译 .less 文件

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

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

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

8. 写在最后

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

工作生活

Webpack 入门级教程