> For the complete documentation index, see [llms.txt](https://docs.hong97.ltd/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.hong97.ltd/workflow/webpack/output.md).

# 管理输出

**动态地生成 index.html ，并且动态地向其中添加打包好的 bundle**

### 独立的 bundle

**webpack.config.js**

```js
module.exports = {
    entry: {
        js1: './src/js1.js',
        js2: './src/js2.js'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
        clean: true		// 打包时自动清理上一次文件
    },...
}
```

这样每一个 js 文件都会被打包成独立的 bundle，并且按照对应的文件名命名

![](https://69742910-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FdZsaQMvQQ6rUrzKixd5V%2Fuploads%2Fgit-blob-5471ebbc062c0062f34a1b80462e748398e5ff3b%2Fimage-20211224151650655.png?alt=media)

### HtmlWebpackPlugin

```bash
yarn add -D html-webpack-plugin
```

自动生成 html 文件

**webpack.config.js**

```js
plugins: [
  new HtmlWebpackPlugin({
    title: 'xxx'
  })
]
```