Как иметь несколько кусков, но один файл JS, который загружает их

Question

Я пытаюсь настроить Webpack, в настоящее время не использующий dev-сервер, и мое приложение обслуживается бэкэндом Python, имеющим index.html.

Я пытаюсь использовать SplitChunksPlugin, чтобы я мог иметь несколько чанков (приложение, поставщик, время выполнения и т. Д.). Однако, чтобы упростить загрузку из бэкэнда Python, мне было интересно, можно ли как-то сказать Webpack создать дополнительный файл, например, main.js, который будет динамически загружать другие чанки в правильном порядке. Это вещь?

Answer 1

Вы можете использовать динамический импорт

import(/* webpackChunkName: "chunkName" */ 'chunkPath')

Создание собственного чанка и импорт его, когда это необходимо и ваш файл chunkPath может содержать другие фрагменты, которые вы хотите разделить, и они не будут загружены немедленно.

из веб-пакета документов:

import('path/to/module') -> Promise

Динамически загружать модули. Вызовы import() обрабатываются как точки разделения, то есть запрашиваемый модуль и его дочерние элементы разделяются на отдельный фрагмент.

Answer 2

Вы можете использовать плагин html для создания файла js, который загружает все исходные скрипты:

            // Generate js entrypoint for the app to be loaded using a script tag
      new HtmlWebpackPlugin({
        alwaysWriteToDisk: true,
        inject: false,
        // If you have multiple entry points and only some should be loaded 
        // this way, list those entry points in the chunks config
        // chunks: ['sdk'],
        filename: '[name].js',
        minify: false,
        templateContent: ({ htmlWebpackPlugin }) => {
          return (
            dedent`
            "use strict";
            (function(m) {     
              var baseUrl = new URL(m.publicPath, document.currentScript.src);        
              m.js.forEach(src => {
                document.head.appendChild(Object.assign(document.createElement('script'), { src: new URL(src, baseUrl).toString() }));
              });
              m.css.forEach(href => {
                document.head.appendChild(Object.assign(document.createElement('link'), { rel: 'stylesheet', href: new URL(href, baseUrl).toString() }));
              });
            ))(
          ` +
            JSON.stringify(htmlWebpackPlugin.files, null, 2) +
            ');'
          );
        },
      }),