如何拥有多个块但加载它们的单个js文件

Question

我正在尝试设置 Webpack，目前未使用开发服务器，我的应用程序由 python 后端提供服务，该后端具有 index.html.

我正在尝试使用 SplitChunksPlugin，这样我就可以拥有多个块（应用程序、供应商、运行时等）。然而，为了简化它从 python 后端加载的方式，我想知道是否有一种方法可以告诉 Webpack 创建一个额外的文件，比如 main.js 它将动态加载其他块正确的顺序。是这样吗？

Answer 1

您可以使用dynamic import

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

创建自定义块并在需要时导入它，您的文件 chunkPath 可能包含您要拆分的其他块，并且不会立即加载。

来自 webpack docs:

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

Dynamically load modules. Calls to import() are treated as split points, meaning the requested module and its children are split out into a separate chunk.

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) +
            ');'
          );
        },
      }),

如何拥有多个块但加载它们的单个js文件

How to have multiple chunks but a single js file that loads them

webpack

webpack-4

webpack-splitchunks

splitchunksplugin