webpack笔记05 —— 使用webpack打包编译css文件

时间  2021-08-14
标签 css html webpack css3 web 正则表达式 数组 服务器 less ide 栏目 CSS 繁體版
原文   原文链接

1. 写在前面

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

主要内容包括：html

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

  • 打包编译 「.css」 文件css3

  • 打包编译 「.less」 文件web

  • 将css代码抽离为单个文件正则表达式

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

  • 压缩编译后的 「.css」 文件服务器

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

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

<!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代码呢？ide

若是你是使用 「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」 文件进行处理的规则。但愿会对你们有所帮助。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程