Как включить правильные пакеты веб-пакетов с несколькими точками входа?

Question

Каков наилучший способ автоматизации создания (или даже определения вручную) тегов сценария для использования в качестве точки входа в настройке многопользовательского веб-пакета?

Я настраиваю MVC приложение для использования веб-пакета для огромного количества javascript библиотек зависимостей. Поскольку приложение MVC загружает новую страницу для каждого маршрута, у меня есть десятки точек входа, каждая со своим собственным сценарием входа.

Я использую разделение кода и имя * ha sh (для кэша -busting).

Поскольку 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                  

Этот подход убедительно представлен здесь и кажется логичным, поэтому я использовал его.

Все кажется до go до тех пор, пока мне не придется создавать теги сценария для этого монстра.

На маршруте /users, например, как узнать, какие из этих файлов следует включить? Похоже, что webpack сделал все это отображение зависимостей и оставил мне все это делать самому!

Я не могу найти ничего на сайте документации Webpack, где упоминается, как лучше всего это сделать, кроме обсуждения html -webpack-plugin , который, кажется, сосредоточен исключительно на создании одного бесполезного HTML файла, который просто объединяет все теги скрипта в один файл.

Я должен упустить что-то очевидное здесь.

Answer 1

Наконец-то я наткнулся на ответ, зарытый в ответ на проблему на сайте github html -webpack-plugin.

Если вы укажете чанк точки входа для плагина, он правильно вычислит зависимости оттуда вы можете создать al oop в своем конфиге веб-пакета, который создает конфигурацию 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

По крайней мере, в моем предварительном тестировании, это похоже на работу. Было бы здорово, если бы это было упомянуто где-то в документации.