具有单独构建的 Webpack 2 html 文件答案

【问题标题】：Webpack 2 html files with separate builds具有单独构建的 Webpack 2 html 文件
【发布时间】：2019-09-18 07:27:05
【问题描述】：

我想设置一个包含 2 个 html 文件的项目：index.html 和 iframe.html。

index.html 应该注入来自index.js 文件的包，但对于iframe.html，我想注入来自iframe.js 文件中包含的依赖项的包。

我有 2 个入口点的 webpack（通用）配置：

entry: {
 app: Path.resolve(__dirname, '../src/scripts/index.js'),
 iframe: Path.resolve(__dirname, '../src/scripts/iframe.js')
},
output: {
  path: Path.join(__dirname, '../build'),
  filename: 'js/[name].js'
},

但似乎html 两个文件都注入了完整的捆绑包 - 我该如何拆分它？（并确保index.js 不会包含/共享来自iframe.js 文件的代码？）

【问题讨论】：

标签： css iframe webpack bundle webpack-4

【解决方案1】：

感谢this thread我找到了解决方案：

new HtmlWebpackPlugin({
  filename: 'index.html',
  template: Path.resolve(__dirname, '../src/index.html'),
  chunks: ['app']
}),
new HtmlWebpackPlugin({
  filename: 'iframe.html',
  template: Path.resolve(__dirname, '../src/iframe.html'),
  chunks: ['iframe']
})

【讨论】：