Webpack中文:
    loader | webpack 中文文档

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

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

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

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

    安装:

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

    配置:

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

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