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);
}
