乐趣区

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

退出移动版