除了资源模块，我们还可以通过loader引入其他类型的文件

1. loader

webpack 只能理解JavaScrip 和JSON文件，这是 webpack 开箱可用的自带能力。loader让 webpack 能够去处理其他类型的文件，并将它们转换为有效 模块，以供应用程序使用，以及被添加到依赖图中

在 webpack 的配置中，loader有两个属性：

  1. test 属性，识别出哪些文件会被转换
  2. use 属性，定义出在进行转换时，应该使用哪个 loader
  1. const path = require('path');
  3. module.exports = {  
  4.   output: {    
  5.     filename: 'webpack5.bundle.js'
  6.   },  
  8.   module: {    
  9.     rules: [
  10.       { 
  11.         test: /\.txt$/, 
  12.         use: 'raw-loader'
  13.       }], 
  14.   },
  15. };

以上配置中，在 module 对象定义了 rules 属性，里面包含两个必须属性：test 和 use。这告诉 webpack 编译器如下信息：

当碰到「在 require()/import 语句中被解析为 ‘.txt’ 的路径」时，在你对它打包之前，先 use(使用) raw-loader 转换一下

2. 加载 css

① 直接打包

在不使用 资源模块 和 安装loader时，在 js 模块引入后直接打包，会报错
image.png

② style-loader css-loader

为了在 js 模块中import一个 CSS 文件，你需要安装style-loader和css-loade，并在module 配置中添加这些 loader：

css-loader：将 css 文件中的属性挂载到标签上 style-loader：将 css 放入到页面中。在模块执行过程中，含有 CSS 字符串的