Webpack 5+TypeScript项目能否动态加载执行脚本文件？

Webpack 是静态打包工具，编译阶段需要明确所有模块依赖关系——硬编码路径能被Webpack直接解析并打包，但纯变量路径因为编译时无法确定具体指向，就会抛出模块找不到的错误。下面是几种可行的解决思路：

1. 限定动态路径范围，让Webpack可预扫描 #

如果你的模块都集中在某个固定目录下，给动态路径加上固定前缀，Webpack就能扫描该目录下的所有文件并打包，同时保留动态加载的能力。示例：

// 假设自定义模块都放在./scripts目录下
const configModulePath = './scripts/foo.js';
// 魔法注释告诉Webpack打包规则，可选
const targetModule = await import(/* webpackChunkName: "dynamic-[request]" */ configModulePath);

注意：路径必须包含固定前缀（比如./scripts/），不能是完全无规则的变量，否则Webpack无法确定要打包哪些文件。

2. 交给Node.js原生加载（外部模块场景） #

如果你的目标模块不在Webpack的打包范围内（比如从外部配置文件读取的独立脚本），可以用Node.js原生的import()或require，同时在Webpack配置里排除这些模块的打包：

代码示例 #

// 读取自定义配置文件
const appConfig = require('./app.config.json');
// 用Node原生能力加载模块，路径需对应运行时的文件位置
const module = await import(appConfig.targetModulePath);

Webpack配置修改 #

在webpack.config.js中添加externals配置，让Webpack跳过这些模块的打包：

module.exports = {
  // 其他配置...
  externals: [
    function({ request }, callback) {
      // 匹配你需要外部加载的模块路径规则，比如以./custom-scripts/开头
      if (/^\.\/custom-scripts\//.test(request)) {
        // 告诉Webpack用commonjs格式加载该外部模块
        return callback(null, `commonjs ${request}`);
      }
      callback();
    }
  ]
};

这种方式下，目标模块需要放在打包后程序能访问到的路径下，Webpack不会将其打包进bundle。

3. 极端场景：直接读取文件并执行（不推荐） #

如果必须加载完全任意路径的脚本，可以用Node的fs读取文件内容，再用vm模块执行，但这种方式会丢失TypeScript类型检查、模块依赖解析等优势，仅适合特殊场景：

import fs from 'fs';
import vm from 'vm';

const scriptPath = './random-script.js';
const scriptContent = fs.readFileSync(scriptPath, 'utf8');
const context = vm.createContext({ require, module });
vm.runInContext(scriptContent, context);
// 访问执行后的模块导出
console.log(context.module.exports);

内容的提问来源于stack exchange，提问作者Jon Sud