如何包含具有多個入口點的正確 webpack 包？

Question

在多入口 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 文件，該文件只是將所有腳本標簽塞入單個文件。

我一定在這里遺漏了一些明顯的東西。

Answer 1

我終於在 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

至少在我的初步測試中，這似乎有效。 如果在文檔中的某處提到它會很棒。