概念

webpack使用loader（加载器）来加载模块，其默认内置的loader只能处理js模块，所以需要给其他类型的模块配置相应的loader。

用法

在配置对象的modules属性中添加一个rules数组，这个数组即我们针对资源模块的加载规则配置。每个规则对象都需要两个属性：test，use
test属性值是一个正则表达式，用来匹配打包过程中遇到的文件路径。
use属性用来指定匹配的文件需要用到的loader。注意：配置多个loader，执行顺序是从后往前执行。

Tip：

通过js加载资源模块：

一般webpack入口文件还是JS，因为某种程度上来说打包入口就是应用的运行入口，前端的业务一般也是由JS驱动。所以合理的做法一般是把js文件作为入口文件，在js代码中import语句加载css文件。webpack在打包过程中会循环遍历每个模块，根据配置将遇到的每个模块交给相应的loader处理完后，将结果打包到一起。

为什么在js中加载其他资源

webpack为什么要在js中加载css而不是将样式和行为分离？
webpack不仅建议我们在js中引入css，还建议我们在代码中引入当前业务所需要的的任意资源文件。因为真正需要这个资源的不是整个应用，而是当前正在编写的业务，这就是webpack的设计哲学。
例子：开发某个功能需要一个样式模块和一个图片文件，如果将资源添加进html，再到js中编写相关逻辑，如果后面这个功能要修改或删除，就需要同时去维护js的代码和html的资源引用，而遵循webpack的设计思想，所有资源由js控制，就只需要维护js代码即可。
优点：

  1. 逻辑上较为合理，js确实需要这些资源
  2. 结合webpack打包，确保上线资源不会遗漏缺失