[TOC]
### 1.安裝依賴
~~~
npm install --save-dev file-loader
~~~
### 2. 使用方法
~~~
/* 處理項目里的資源文件,必須安裝對應的loader */
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
+ {
+ test: /\.(png|svg|jpg|gif)$/,
+ use: [
+ 'file-loader'
+ ]
+ }
]
}
};
~~~
### 3. 添加
~~~
|- /src
+ |- icon.png
|- style.css
|- index.js
//src/index.js
import _ from 'lodash';
import './style.css';
+ import Icon from './icon.png';
function component() {
var element = document.createElement('div');
// Lodash，現在由此腳本導入
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
element.classList.add('hello');
+ // 將圖像添加到我們現有的 div。
+ var myIcon = new Image();
+ myIcon.src = Icon;
+
+ element.appendChild(myIcon);
return element;
}
document.body.appendChild(component());
//src/style.css
.hello {
color: red;
+ background: url('./icon.png');
}
~~~
#### 4. webpack 打包
