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

【问题标题】：Webpack - Generating multiple HTML files with different javascript script filesWebpack - 使用不同的 javascript 脚本文件生成多个 HTML 文件
【发布时间】：2019-10-26 11:10:57
【问题描述】：

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

我设置了多个条目，输出配置为[name].bundle.js。我也在使用多个 new 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  This is the dev tools page
  <script type="text/javascript" src="js/background.bundle.js"></script>
  <script type="text/javascript" src="js/panel.bundle.js"></script>
  <script type="text/javascript" src="js/popup.bundle.js"></script>
  <script type="text/javascript" src="js/devtools.bundle.js"></script>
</body>
</html>

【问题讨论】：

标签： javascript html webpack output

【解决方案1】：

您可以对多个页面执行此操作，配置模块条目和条目

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-webpack-plugin

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 注入正文，并使用vanilla javascript 而不是lodash 来提高性能。最后，您能否澄清一下使用chunks: ['background','vendors'] 作为HtmlWebpackPlugin 参数，更具体地说是第二项vendors？
供应商是您所有条目中的通用模块，例如。 jQuery|Loadash
我也设法让它工作，但我正在工作。在一个多页面应用程序中，一个恼人的缺点是我拥有的每个 .html 入口点都需要一个 .js 文件（即使它是空的) 以便在我更改 Sass、pug 或任何其他文件时实时重新加载以刷新浏览器。