loader的三种配置方式

2022-03-30

在这篇 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的三种配置方式】以上就是loader的三种配置方式，更多有关webpack的内容可以参考我其它的博文，持续更新中~

推荐阅读

上一篇：JavaScript的防抖与节流

下一篇：【Redis 系列】redis 学习八，redis 持久化 RDB 和 AOF