loader的三种配置方式

在这篇 webpack处理css资源 文章中使用几个常用的loader 来编译 css 代码。

但其实 loader 的配置方式不止一种，一起来看看其它方式~

在 webpack.config.js 中，通过 module.exports 将配置导出，使用 css-loader 来处理以 .css 结尾的文件

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["css-loader"],
      },
    ],
  },
};

在loader的配置中，除了看到以上 use 数组中存放字符串，也可能有存放对象的写法，使用对象形式时，通常会使用 options 传递参数

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: "css-loader",
            options: {
              importLoaders: 1,
            },
          },
        ],
      },
    ],
  },
};

因为只存在一个loader，且无需传参处理时，所以可能直接将 use 简写为 loader

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        loader: "css-loader",
      },
    ],
  },
};

可以总结为：

module 中通过 rules 来配置 loader 的规则，对应的是一个数组，数组中是一个个 Rule 对象，可以设置多个属性。

1、test 属性，表示匹配的规则，通常用正则表达式

2、use 属性，对应的是一个数组

• 数组中可以存放对象
  loader 属性，字符串，表示使用哪个loader处理资源
  options 属性，字符串或者对象，附加内容，值会传递到 loader 中

• 数组中还可以存放字符串，表示使用的 loader，如 use: ["css-loader"]

3、loader 属性，当只有一个loader时的省略写法

三种配置方式都是存在的，可以根据不同的配置场景灵活选择。

以上就是loader的三种配置方式，更多有关webpack的内容可以参考我其它的博文，持续更新中~