1. 簡介

本節(jié)開始介紹Loader的概念和配置。

2. 非js文件的打包

前面說過，webpack 是一個現(xiàn)代 JavaScript 應用程序的靜態(tài)模塊打包器(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'
            }
        }]
    }
};

運行后發(fā)現(xiàn)打包成功：

image.png

但是，打開如下目錄的index.html發(fā)現(xiàn)：

image.png

圖片沒有，失敗原因是404，證明src路徑有誤。仔細看，發(fā)現(xiàn)是層級的問題。因為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);
}