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

Question

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

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

我有一个用于 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 不会 contain/share 来自 iframe.js 文件的代码？）

Answer 1

感谢我找到了解决方案：

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

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

Webpack 2 html files with separate builds

css

iframe

bundle

webpack

webpack-4