前端工程化-webpack处理css-less代码的loader

心已赠人 2023-09-28 14:39 51阅读 0赞

#### 文章目录 ####

*   *  webpack的loader
     *   *  Webpack的依赖图
         *  css-loader的使用
         *  style-loader使用
         *  处理less文件
         *  PostCSS工具

### webpack的loader ###

#### Webpack的依赖图 ####

**webpack到底是如何对我们的项目进行打包的呢？**

*  事实上webpack在处理应用程序时，它会根据命令或者配置文件找到入口文件；
 *  从入口开始，会生成一个 依赖关系图，这个依赖关系图会包含应用程序中所需的所有模块（比如.js文件、css文件、图片、字体等）；
 *  然后遍历图结构，打包一个个模块（根据文件的不同使用不同的loader来解析）；

![在这里插入图片描述][eec7a02db2304a70b418ee51155d2b02.png_pic_center]

#### css-loader的使用 ####

**如果我们打包的文件有css, 那么打包会报一个错误信息, 错误信息告诉我们需要一个loader来加载这个css文件，但是loader是什么呢？**

*  loader 可以用于对模块的源代码进行转换；
 *  我们可以将css文件也看成是一个模块，可以通过import来加载这个模块的；
 *  在加载这个模块时，webpack其实并不知道如何对其进行加载，我们必须制定对应的loader来完成这个功能；

**那么我们需要一个什么样的loader呢？**

*  对于加载css文件来说，我们需要一个可以读取css文件的loader；
 *  这个loader最常用的是css-loader；

**css-loader的安装**：`npm install css-loader -D`

**安装完成后, 我们该如何使用这个loader来加载css文件呢？有三种方式**：

*  **内联方式** (基本不用) ；
 *  **CLI方式**（webpack5中不再使用）；
 *  **配置方式**；
 *  **我们主要学习最常用的配置方式**

**内联方式**: 内联方式使用较少，因为不方便管理；

*  在引入的样式前加上使用的loader，并且使用!分割；

**CLI方式**

*  在webpack5的文档中已经没有了–module-bind；
 *  实际应用中也比较少使用，因为不方便管理；

--------------------

**配置方式**:

**配置方式表示的意思是在我们的webpack.config.js文件中写明配置信息**：

*  module.rules中允许我们配置多个loader（因为我们也会继续使用其他的loader，来完成其他文件的加载）；
 *  这种方式可以更好的表示loader的配置，也方便后期的维护，同时也让你对各个Loader有一个全局的概览；

**module.rules的配置如下**：

**1.rules属性对应的值是一个数组(因为我们可能会配置多个loader): \[Rule\]**

**2.数组中存放的是一个个的Rule，Rule是一个对象，对象中可以设置多个属性：**

*  test属性：告知webpack匹配什么文件，通常会设置成正则表达式；
 *  use属性：对应的值时一个数组：\[UseEntry\]
    
    **UseEntry是一个对象**，可以通过对象的属性来设置一些其他属性
    
    **loader**：**必须有一个 loader属性，对应的值是一个字符串**；
    
    **options**：**可选的属性**，值是一个字符串或者对象，值会被传入到loader中；
    
    **query**：目前已经**使用options来替代**；

const path = require("path");
    
    // 导出配置信息
    module.exports = {
        
      entry: "./src/main.js",
      output: {
        
        filename: "bundle.js",
        path: path.resolve(__dirname, "./build")
      },
    
      // 配置loader
      module: {
        
        rules: [
          {
        
            // 告诉浏览器匹配什么文件
            test: /\.css$/,
            // 告知webpack使用哪一个loader, 前提是安装好
            ues: [
              {
         loader: "css-loader" }
            ]
          }
        ]
      }
    }

**传递字符串（如：use: \[ ‘style-loader’ \]）是 loader 属性的简写方式（如：use: \[ \{ loader: ‘style-loader’\} \]）(前提是没有使用其他属性)**

*  loader属性： Rule.use: \[ \{ loader \} \] 的简写, 当配置中**只有一个loader的时候才可以使用**

const path = require("path");
    
    // 导出配置信息
    module.exports = {
        
      entry: "./src/main.js",
      output: {
        
        filename: "bundle.js",
        path: path.resolve(__dirname, "./build")
      },
    
      // 配置loader
      module: {
        
        rules: [
          {
        
            // 告诉浏览器匹配什么文件
            test: /\.css$/,
            // 告知webpack使用哪一个loader, 前提是安装好
            loader: "css-loader"
          }
        ]
      }
    }

#### style-loader使用 ####

**我们已经可以通过css-loader来加载css文件了**

*  但是你会发现这个css在我们的代码中并没有生效（页面没有效果）

**这是为什么呢？**

*  因为css-loader只是负责将.css文件进行解析，并不会将解析之后的css插入到页面中；
 *  如果我们希望再完成插入style的操作，那么我们还需要另外一个loader，就是style-loader；

**安装style-loader**: `npm install style-loader -D`

**安装完成后, 我们同样需要配置loader**

*  在配置文件中，添加style-loader；
 *  注意：因为loader的执行顺序是从右向左（或者说从下到上，或者说从后到前的），所以我们需要将style-loader写到css-loader的前面；

// 配置loader
    module: {
        
    	rules: [
    		{
        
    			test: /\.css$/,
    			ues: [
    				{
         loader: "style-loader" },
    				{
         loader: "css-loader" }
    			]
    		}
    	]
    }

**重新执行编译`npm run build`，可以发现打包后的css已经生效了**：

*  当前目前我们的css是通过页内样式的方式添加进来的；
 *  后续我们也会讲如何将css抽取到单独的文件中，并且进行压缩等操作；

#### 处理less文件 ####

**在我们开发中，我们可能会使用less、sass、stylus的预处理器来编写css样式，效率会更高。**

那么，如何可以让我们的环境支持这些预处理器呢？

*  首先我们需要确定，less、sass等编写的css需要通过工具转换成普通的css；
 *  比如我们编写如下的less样式：

@fonSize: 30px;
    @fontWeight: 700;
    
    .content {
      font-size: @fonSize;
      font-weight: @fontWeight;
    }

**我们可以使用less工具来完成它的编译转换, 安装less-loader：`npm install less-loader -D`**

**但是在项目中我们会编写大量的css，它们如何可以自动转换呢？**

*  这个时候我们就可以使用less-loader，来自动使用less工具转换less到css；
 *  我们需要配置三个loader, 先从less转为css, 再对css解析, 再使用style-loader插入到页面

**配置webpack.config.js**

// 配置loader
    module: {
        
      rules: [
        {
        
          test: /\.less$/,
          ues: [
            {
         loader: "style-loader" },
            {
         loader: "css-loader" },
            {
         loader: "less-loader" }
          ]
        }
      ]
    }

**执行`npm run build`, less就可以自动转换成css，并且页面也会生效了**

#### PostCSS工具 ####

什么是PostCSS呢？

*  PostCSS是一个通过JavaScript来转换样式的工具；
 *  这个工具可以帮助我们进行一些CSS的转换和适配，比如自动添加浏览器前缀、css样式的重置；
 *  但是实现这些功能，我们需要借助于PostCSS对应的插件；

如何使用PostCSS呢？主要就是两个步骤：

*  第一步：查找PostCSS在构建工具中的扩展，比如webpack中的postcss-loader；
 *  第二步：选择可以添加你需要的PostCSS相关的插件；

我们可以借助于构建工具：

*  在webpack中使用postcss就是使用postcss-loader来处理的；

我们来安装postcss-loader：`npm install postcss-loader -D`

我们修改加载css的loader：（配置文件已经过多，给出一部分了）

*  注意：因为postcss需要有对应的插件才会起效果，所以我们需要配置它的plugin；
 *  因为我们需要添加前缀，所以要安装autoprefixer：`npm install autoprefixer -D`

我们可以将这些配置信息放到一个单独的文件中进行管理：

*  在根目录下创建postcss.config.js

{
        
      loader: "postcss-loader",
      options: {
        
        postcssOptions: {
        
          plugins: [
            require("autoprefixer")
          ]
        }
      }
    }

我们也可以将这些配置信息放到一个单独的文件中进行管理：

*  在根目录下创建postcss.config.js

module.exports = {
        
      pligins: [
        require("autoprefixer")
      ],
    }

--------------------

**postcss-preset-env**

事实上，在配置postcss-loader时，我们配置插件并不需要使用autoprefixer。

我们可以使用另外一个插件：postcss-preset-env

*  postcss-preset-env也是一个postcss的插件；
 *  它可以帮助我们将一些现代的CSS特性，转成大多数浏览器认识的CSS，并且会根据目标浏览器或者运行时环境添加所需的polyfill；
 *  也包括会自动帮助我们添加autoprefixer（所以相当于已经**内置了autoprefixer**）；

**首先，我们需要安装postcss-preset-env**：`npm install postcss-preset-env -D`

**之后，我们直接修改掉之前的autoprefixer即可**：

pligins: [
    	require("postcss-preset-env")
    ],

[eec7a02db2304a70b418ee51155d2b02.png_pic_center]: https://img-blog.csdnimg.cn/eec7a02db2304a70b418ee51155d2b02.png#pic_center