3

在多入口 webpack 设置中自动生成（甚至手动找出）用于入口点的脚本标签的最佳方法是什么？

我正在设置一个 MVC 应用程序以将 webpack 用于大量的 javascript 依赖库。由于 MVC 应用程序为每条路线加载了一个新页面，因此我有几十个入口点，每个入口点都有自己的入口脚本。

我正在使用代码拆分和哈希命名（用于缓存清除）。

由于 webpack 正在为每个入口点计算依赖关系树，它似乎在将代码分解成包以供重用方面做得很好。这是我的配置（减去顶部的代码和插件）：

module.exports = {
    mode: "development",
    entry: {
        products_index: './Scripts/app/pages/Products/index.js',
        users_index: './Scripts/app/pages/Users/index.js',
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].[contenthash:8].js',
    },    
    node: {
        fs: 'empty',
    },
    optimization: {
        runtimeChunk: 'single',
        splitChunks: {
            chunks: 'all',
            maxInitialRequests: Infinity,
            minSize: 0,
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    name(module) {
                        // get the name. E.g. node_modules/packageName/not/this/part.js
                        // or node_modules/packageName
                        const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];

                        // npm package names are URL-safe, but some servers don't like @ symbols
                        return `npm.${packageName.replace('@', '')}`;
                    },
                },
            },
        },
    },

对于这个示例，我将条目限制为 2，但我还有更多。

此设置的输出dist为：

 index.html                               
 npm.accounting.acb8cd33.js               
 npm.dropzone.1dcac339.js                 
 npm.jquery.7fe2b020.js                   
 npm.knockout-amd-helpers.356a8521.js     
 npm.knockout-punches.efb33702.js         
 npm.knockout.eaf67101.js                 
 npm.knockout.mapping.e01549c3.js         
 npm.moment.0f7e6808.js                   
 npm.sprintf-js.82f89700.js               
 npm.toastr.c6448676.js                   
 npm.webpack.2aab6b7b.js                  
 runtime.acfdeda3.js                      
 products_index.8ef7831b.js             
 products_index~users_index.02e60e46.js 
 users_index.42c4b7af.js

这种方法在这里令人信服地提出并且看起来合乎逻辑，所以我使用了它。

一切似乎都很顺利，直到我必须为这个怪物创建脚本标签。

例如，在/users路线上，我如何知道要包含哪些文件？似乎 webpack 已经完成了所有这些依赖映射，让我自己再做一遍！

我在 Webpack 文档站点中找不到任何提及如何最好地做到这一点的内容，除了对html-webpack-plugin的讨论，它似乎只专注于创建一个无用的 HTML 文件，该文件只是将所有脚本标签塞进一个单个文件。

我必须在这里遗漏一些明显的东西。

4

1 回答 1

4

我终于在 html-webpack-plugin github 站点上的一个问题的响应中找到了一个答案。

如果您为插件指定入口点块，它会从那里正确计算依赖项，因此您可以在 webpack 配置中创建一个循环来构建entry配置和plugin配置部分，然后将它们添加到您的配置中，如下所示：

var entry: {
        a: "./a",
        b: "./b",
        c: ["./c", "./d"]
};

var entryHtmlPlugins = Object.keys(entry).map(function(entryName) {
   return new HtmlWebpackPlugin({
      filename: entryName + '.html',
      chunks: [entryName]
  })
});

module.export = {
   entry: entry,
   //....
  plugins: [
      // ..
  ].concat(entryHtmlPlugins)
}

问题页面在这里： https ://github.com/jantimon/html-webpack-plugin/issues/299#issuecomment-216448896

至少在我的初步测试中，这似乎有效。如果在文档中的某处提到它会很棒。

于 2020-03-26T13:45:59.983 回答