## HtmlWebpackPlugin
使用 HtmlWebpackPlugin 插件可以自動往 HTML 中添加和更改依賴路徑。
npm: https://www.npmjs.com/package/html-webpack-plugin
```
yarn add html-webpack-plugin --dev
```
在 `conf/webpack.config.js` 中配置:
```js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, '..', 'dist'),
filename: '[name].bundle.js'
},
plugins: [
new HtmlWebpackPlugin({
title: 'Output Management'
})
]
};
```
將 `index.html` 改為原文件路徑依賴:
```html
<script src='./src/main.js'></script>
```
打包后，會看到在 dist 目錄下生成了一個 `index.html`，依賴已經自動解決
```html
<script type="text/javascript" src="main.bundle.js"></script>
```
### 輸出多個 HTML
默認使用只會生成 index.html，若要生成多個 html，則:
```js
new HtmlWebpackPlugin({
title: 'Output Management'
}),
new HtmlWebpackPlugin({ // Also generate a test.html
filename: 'static/test.html', // 目標地址
template: 'src/static/test.html' // 源地址
})
```
