Question

我正在弹出的cli上构建项目。我之所以退出，是因为将要生成多个页面，并且我想制作一些独立的脚本，并使它们利用样板提供的ES6和调试工具。

我的问题是，在使用technique通过html-webpack-plugin扩展多个页面时，会使用每个页面的两个脚本来构建生成的HTML文件。

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

这是我的基本Web Pack配置。

...
entry: {

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

    },
...

如您所见，我使用的是与样板一起提供的相同的热模块重载内容，但是随后我偏离了从另一页所需的page变量中散布值：

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;

这就是我如何动态生成多个条目。这部分代码可以正常工作，但是我认为我会发布它，以防万一我想念这里需要发生的事情。

下一步我们有实际的插件部分。在模块化代码方面，我采用了类似的方法，因此这是配置部分（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类的多个实例，我们还根据应用程序所在的文件夹的名称来命名html文件。这满足了technique在他们的问题部分。

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

如您所见，添加了每个应用程序的CSS和JS。这两个页面都会发生这种情况。我只希望每个页面都有相关的CSS和JS。

你知道这是怎么回事吗？

Answer 1

如果您只想在每个页面中添加一些块，则需要指定要在html中作为脚本使用的块：

{
    "query":{
        "query_string":{
            "query":"+(name:John Doe)",
            "fields":[

            ]
        }
    },
    "aggregations":{

        "name":{
            "terms":{
                "field":"name",
                "size":10
            }
        }
    }
}

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

1 个答案: