Webpack 如何打包运行时 chunk ， 且在项目工程中， 如何去加载这个运行时 chunk ?

Webpack打包运行时chunk的方式可以通过optimization.runtimeChunk选项来配置。下面是一个示例的配置：

module.exports = {
  // ...
  optimization: {
    runtimeChunk: 'single',
  },
};

上述配置中，通过设置optimization.runtimeChunk为'single'，将会把所有的webpack运行时代码打包为一个单独的chunk。

在项目工程中加载运行时chunk有两种方式：

1. 通过script标签加载：可以使用HtmlWebpackPlugin插件来自动将运行时chunk添加到 HTML 文件中。在webpack配置文件中添加以下配置：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      // ...
      chunks: ['runtime', 'app'],
    }),
  ],
};

上述配置中，chunks选项指定了要加载的chunk，包括运行时chunk（'runtime'）和其他的业务代码chunk（'app'）。最终生成的HTML文件会自动引入这些chunk。

2. 通过import语句动态加载：可以使用动态导入的方式来加载运行时chunk。在需要加载运行时chunk的地方，使用以下代码：

import(/* webpackChunkName: "runtime" */ './path/to/runtime').then((runtime) => {
  // 运行时chunk加载完成后的逻辑
});

上述代码中，通过import()函数动态加载运行时chunk，通过webpackChunkName注释指定要加载的chunk名称（这里是'runtime'）。加载完成后，可以进行相关逻辑处理。

总结：Webpack可以通过optimization.runtimeChunk选项配置打包运行时chunk，可以通过script标签加载或者使用动态导入的方式来加载运行时chunk。

追问

如果只想把某几个文件打包成运行时加载， 该如何处理呢？

如果你想将某几个文件打包成运行时加载，可以使用Webpack的entry配置和import()语法来实现。

首先，在Webpack的配置文件中，将这几个文件指定为单独的entry点。例如：

module.exports = {
  // ...
  entry: {
    main: './src/main.js',
    runtime: './src/runtime.js',
  },
};

上述配置中，main.js是业务代码的入口文件，runtime.js是你想要打包成运行时加载的文件。

然后，在你的业务代码中，通过import()动态导入这些文件。例如：

function loadRuntime() {
  return import('./runtime.js');
}

// 使用动态导入的方式加载运行时文件
loadRuntime().then(runtime => {
  // 运行时文件加载完成后的逻辑
});

使用import()会返回一个Promise，可以通过.then()来处理文件加载完成后的逻辑。

最后，使用Webpack进行打包时，会根据配置的entry点和import()语法自动将这几个文件打包成运行时加载的模块。运行时模块会在需要时动态加载并执行。

注意：在使用import()动态导入文件时，需要确保你的环境支持Promise和动态导入语法。

作为上面回复的补充

除了 entry 的方式可以处理自己申明的 runtime 文件以外， 还可以直接在 import('xx') 的时候申明；

例如：

import(/* webpackChunkName: "runtime" */ './path/to/runtime').then((runtime) => {
  // 运行时chunk加载完成后的逻辑
});

上面的方式， 可以在也可以达到同样的效果， 只是在 import 的时候申明runtime文件名称而已