Webpack中文：
    loader | webpack 中文文档

    Webpack是一个模块话打包工具，所以它只知道模块相关的事情，Webpack在最开始的时候只能解析JS文件相互依赖关系。
    如果想要支持非JS文件类型（如.css、.png等），就需要对Webpack配置文件进行配置。

    假设我们现在在index.js文件中引入一张照片然后执行 npm run build 的时候就报错。

    1. // index.js
    2. import testImage from './logo.png';
    4. let img = new Image();
    5. img.src = testImage;
    7. document.getElementById("app").appendChild(img);

    这是因为Webpack默认只会把JS文件模块打包，而遇到图片文件的时候它就不知道该怎么打包了。
    所以我们要配置module。

    安装：

    1. $ npm install file-loader --save-dev

    配置：

    1. // 引用node下的模块
    2. const path = require("path")
    4. module.exports = {
    5.   entry: "./src/index.js",
    6.   output: {
    7.     filename: 'main.js',
    8.     path: path.resolve(__dirname, "dist")
    9.   },
    10.   // 当你打包非一个模块的时候就到这里查询相应的规则
    11.   module: {
    12.     rules: [{
    13.       test: /\.png$/,
    14.       use: {
    15.         loader: "file-loader"
    16.       }
    17.     }]
    18.   }
    19. }

    :::info 所以**loader**就是一种打包的方案，它会根据你的规则和安装的**loader**对文件进行打包。 :::