1. 簡(jiǎn)介
本節(jié)開始介紹Loader的概念和配置夕晓。
2. 非js文件的打包
前面說過奶躯，webpack 是一個(gè)現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler)澄成，我們也看到了webpack對(duì)js文件的打包功效和基礎(chǔ)配置家夺。
但是擦俐，前端代碼并不只有JS望薄，還有比如html倒彰，css和圖片文件等审洞。這個(gè)時(shí)候，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);
}
運(yùn)行結(jié)果如圖：
image.png
可以看到./src/img/timg.jpeg這個(gè)文件打包失敗，并且error中還有提示创淡，建議嘗試使用合適的loader來處理這種類型的文件痴晦。
3. 嘗試使用Loader
我們按照建議嘗試使用loader。對(duì)于圖片文件琳彩，我們使用最普通的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'
}
}]
}
};
運(yùn)行后發(fā)現(xiàn)打包成功：
image.png
但是碧浊，打開如下目錄的index.html發(fā)現(xiàn)：
image.png
圖片沒有，失敗原因是404瘟仿，證明src路徑有誤辉词。仔細(xì)看，發(fā)現(xiàn)是層級(jí)的問題猾骡。因?yàn)閟rc指定的路徑是相對(duì)html所在目錄徑來查找的瑞躺，但是此時(shí)實(shí)際的資源路徑在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);
}
