webpack之rules规则

Posted 2023-03-14

参考技术A 本文主要对webpack配置module的rules是条件匹配详解

一个loader的配置，一般一个test就够了，多的话也就一个test加上include或者exclude，如果exclude 、 include 、 test万一出现了三个在同一个loader的配置中时，优先级：
exclude > include > test

module.rules 的value是数组，允许你在 webpack 配置中指定多个 loader。
loader 从右到左 （或 从下到上 ）地取值(evaluate)/执行(execute)。在下面的示例中，从 sass-loader 开始执行，然后继续执行 css-loader，最后以 style-loader 为结束。查看 loader 功能 章节，了解有关 loader 顺序的更多信息。

1、如何使css模块化？需要在我们的webpack.config.js中对css-loader进行一些额外设置，上面示例中有，详细参考 css-loader

2、如何开启单个样式文件的全局模式呢？
可以在webpack.config.js中配置两次处理css的loader，配置如下：

js中引入css
const styles = require('./popup.css');
打印 styles 对象，是这样的

3、如何让css模块化后生成的class具有可读性？
配置webpack.config.js中css-loader的 localIdentName ：

打印 styles 对象，是这样的