## 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' // 源地址
})
```
