html-webpack-plugin 多个入口点添加所有脚本

Question

我正在一个弹出的 React CLI 上构建一个项目。我弹出它的原因是因为将生成多个页面和一些我想制作的独立脚本并让它们利用样板提供的 ES6 和调试工具。

我的问题是，在使用 technique 构建多个页面时，html-webpack-plugin 构建了生成的 HTML 文件，每个页面都有两个脚本。

所以，让我们看看基本的入口点

这是我的基本网络包配置。

...
entry: {

      devServerClient : require.resolve('react-dev-utils/webpackHotDevClient'),
      // Finally, this is your app's code:
      ...pages,

    },
...

如您所见，我正在使用样板附带的相同热模块重新加载内容，但后来我偏离了从另一个页面需要的 pages 变量的值传播：

const glob = require("glob");
const path = require("path");

const input_path = path.resolve(__dirname, "../src/apps/*/index.js");
const apps_directories = glob.sync(input_path);

let pages = {};

// Loop through them and append them to the pages object for processing.
apps_directories.map(function (app_directory) {
    const split_name = app_directory.split("/");
    pages[split_name[split_name.length - 2]] = app_directory;
});

module.exports = pages;

这就是我动态生成多个条目的方式。这部分代码工作正常，但我想我会 post 以防万一这里需要发生我遗漏的事情。

接下来是真正的插件部分。我在模块化代码时采用了类似的方法，所以这是配置中的那部分（web pack 对象的根级别）：

...
plugins: [
    // Generates an `index.html` file with the <script> injected.
    ...HtmlWebpackPlugins,
    ...
]
...

再次，我将它们散布在其中，生成这些的脚本如下所示：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const pages = require("./multiplePaths");
const paths = require("./paths");

const NODE_ENV = process.env.NODE_ENV;

let HtmlWebpackPlugins = [];

Object.keys(pages).map(function (fileName) {
    if (NODE_ENV === "development") {
        HtmlWebpackPlugins.push( new HtmlWebpackPlugin({
            inject: true,
            template: paths.appHtml,
            filename: `${fileName}.html`,
        }));
        return;
    }

    HtmlWebpackPlugins.push(new HtmlWebpackPlugin({
        inject: true,
        template: paths.appHtml,
        filename:  `${fileName}.html`,
        minify: {
            removeComments: true,
            collapseWhitespace: true,
            removeRedundantAttributes: true,
            useShortDoctype: true,
            removeEmptyAttributes: true,
            removeStyleLinkTypeAttributes: true,
            keepClosingSlash: true,
            minifyJS: true,
            minifyCSS: true,
            minifyURLs: true,
        },
    }));
});

module.exports = HtmlWebpackPlugins;

此脚本在此处为每个条目生成 HtmlWebpackPlugin class 的多个实例，我们还根据文件夹命名 html 文件应用所在的文件夹的名称in。这满足了他们问题部分中的 technique。

然后问题发生在生成的 HTML 页面中。请注意，所有文件夹的脚本都被注入到每个应用程序中：

可以看到，每个app的CSS和JS都添加了。这发生在两个页面上。我只想要每个页面的相关 CSS 和 JS。

知道这里发生了什么吗？

Answer 1

如果您只想在每个页面中添加一些块，您需要指定您希望在 html 中作为脚本确切包含哪些块：

HtmlWebpackPlugins.push(new HtmlWebpackPlugin({
    inject: true,
    template: paths.appHtml,
    filename:  `${fileName}.html`,
    chunks: [filename], // add any chunks you need here (for example, chunk with libraries
    ....
});

Answer 2

我使用类似这样的方法基于 webpack 条目为 HtmlWebpackPlugin 创建条目：

// Webpack entries
const entry = {
  "nameA": "./xy/nameA/main.js",
  "nameB": "./xy/nameB/main.js",
};

// Plugins
let plugins = [];

// HTML injection
Object.keys(entry).forEach((ent) => {
    const htmlPlugin = new HtmlWebpackPlugin({
      inject: true,
      title: "Your Title",
      template: "./html/index.html",
      filename: `formats/${ent}/index.html`,
      chunks: [ent],
    });
    plugins.push(htmlPlugin);
});

// Insert more plugins
plugins = plugins.concat([
    ... your plugins
]);

// Return Config
return {
  // define entry point
  entry,

  // define output file
  output: {
      ...
  },

  ...

  // define Plugins
  plugins,
  
  ...
  
  };

html-webpack-plugin 多个入口点添加所有脚本

html-webpack-plugin multiple entry points adding all scripts

javascript

multiple-entries

webpack

html-webpack-plugin