关于前端: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 的内容能够参考我其它的博文，继续更新中~