css - 具有单独构建的 Webpack 2 html 文件

Question

我想设置一个包含 2 个 html 文件的元素:index.html 和 iframe.html。

index.html 应该注入(inject)来自 index.js 文件的包，但是对于 iframe.html 我想注入(inject)来自 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 文件都注入(inject)了完整的包 - 我该如何拆分它？ (并确保 index.js 不会包含/共享 iframe.js 文件中的代码？)

Answer 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']
})