1. 简介

本节开始介绍Loader的概念和配置。

2. 非js文件的打包

前面说过，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)，我们也看到了webpack对js文件的打包功效和基础配置。
但是，前端代码并不只有JS，还有比如html，css和图片文件等。这个时候，webpack能否成功打包呢？
我们来试一下，改写content.js如下：

// content.js
import timg from './img/timg.jpeg';
export default function Content() {
    var dom = document.getElementById('root');
    var content = document.createElement('img');
    content.src = timg;
    dom.appendChild(content);
}

运行结果如图：

image.png

可以看到./src/img/timg.jpeg这个文件打包失败，并且error中还有提示，建议尝试使用合适的loader来处理这种类型的文件。

3. 尝试使用Loader

我们按照建议尝试使用loader。对于图片文件，我们使用最普通的file-loader即可。其用法和介绍在此file-loader。
安装file-loader后，配置如下：

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'build')
    },
    module: {
        rules: [{
            test: /\.(jpg|jpeg|png|gif)$/,
            use: {
                loader: 'file-loader'
            }
        }]
    }
};

运行后发现打包成功：

image.png

但是，打开如下目录的index.html发现：

image.png

图片没有，失败原因是404，证明src路径有误。仔细看，发现是层级的问题。因为src指定的路径是相对html所在目录径来查找的，但是此时实际的资源路径在webpackconfig.js文件中是指定的output.path中。
如图修改即可(后面我介绍更合理的方法)：

// content.js
import timg from './img/timg.jpeg';
import { output } from '../webpack.config'
export default function Content() {
    var dom = document.getElementById('root');
    var content = document.createElement('img');
    console.log(output.path);
    content.src = `.${output.path}/${timg}`;
    dom.appendChild(content);
}