Webpack-使用不同的javascript脚本文件生成多个HTML文件

我无法在webpack中使用单独的javascript文件创建多个Html文件

我设置了多个条目，其输出配置为

[name].bundle.js

。我还使用多个

新的HtmlWebpackPlugin（）

来创建html文件

我确信这个配置正在做它应该做的事情，但是我不知道如何配置它，以便每个javascript都被单独引用到它自己的html文件中。我无法在网上和文档中找到更多关于这方面的信息

// webpack.config.js
module.exports = {
  ...
  entry: {
    background: './src/browser/chrome/background/index.js',
    panel: './src/browser/chrome/panel/index.js',
    popup: './src/browser/chrome/popup/index.js',
    devtools: './src/browser/chrome/devtools/index.js',
  },
  output: {
    path: path.resolve(__dirname, './build'),
    filename: 'js/[name].bundle.js',
    chunkFilename: '[id].chunk.js',
  },
  ...
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/browser/chrome/popup/index.html',
      filename: 'popup.html',
    }),
    new HtmlWebpackPlugin({
      template: './src/browser/chrome/devtools/index.html',
      filename: 'devtools.html',
    }),
    ...
  ],
  ...
}

//devtools.html
文件
这是开发工具页面

您可以使用多个页面，配置模块条目和条目

const appConfig = {
  entry: {
    background: './src/browser/chrome/background/index.js',
    panel: './src/browser/chrome/panel/index.js',
    popup: './src/browser/chrome/popup/index.js',
    devtools: './src/browser/chrome/devtools/index.js',
  },
  port: 3002,
  entries: {
    background: {
      title: 'background',
      template: './src/browser/chrome/background/index.html',
      chunks: ['background','vendors'],
    },
    popup: {
      title: 'background',
      template: './src/browser/chrome/popup/index.html',
      chunks: ['popup','vendors'],
    },
  },

};

然后配置html网页包插件

let plugins = []
_.each(appConfig.entries, (entryInfo, entryName) => {
  plugins.push(new HtmlWebpackPlugin({
    title: entryInfo.title,
    template: entryInfo.template,
    chunks: entryInfo.chunks,
    chunksSortMode: 'manual',
    inject: 'body',
    favicon: entryInfo.favicon,
    resources: entryInfo.resources
  }));
});

然后配置模块和条目

let entry = _.reduce(appConfig.entry, (entries, entry, entryName) => {
  entries[entryName] = entry;
  return entries;
}, {});

module.export = {
  entry,
  plugins,
}

---

完成

总的来说，这是有效的！它需要一些调整。默认情况下，我将

filename

添加到

HtmlWebpackPlugin

以避免将每个输出覆盖到

index.html

，将参考资料更改为

appConfig.entry[key]

以使用该条目作为脚本url注入到正文中，并使用普通javascript而不是lodash来提高性能。最后，您能否澄清一下关于使用

块：['background'，'vendors']

作为

HtmlWebpackPlugin

参数，第二项

vendors

更具体地说？vendors是所有条目中的常见模块，例如JQuery | LoadashI也设法使其工作，但我在一个多页应用程序中工作，一个恼人的缺点是，我拥有的每个.html入口点都需要一个.js文件（即使它是空的），以便在我更改Sass、pug或任何其他文件时实时重新加载以刷新浏览器。

let entry = _.reduce(appConfig.entry, (entries, entry, entryName) => {
  entries[entryName] = entry;
  return entries;
}, {});

module.export = {
  entry,
  plugins,
}