如何配置webpack以打包通过appendChild动态引入的JS类与相关文件？

webpack默认无法直接识别运行时通过document.createElement('script')插入的静态资源，这类动态逻辑不会被webpack的静态依赖分析捕获，可通过以下几种方案实现需求，无需手动编写数百条引入语句：

方案1：批量动态require（推荐，可纳入打包编译流程） #

如果需要让这些遗留JS文件参与webpack的编译、压缩、兼容转译流程，可直接复用现有文件名数组，配合webpack的动态导入语法批量引入：

// 直接复用你现有代码里的文件名数组
const scriptFiles = ["window.js","eventHandler.js", /* 其余几百个文件名直接拷贝过来即可 */]
const baseLegacyPath = './你的遗留JS文件所在本地目录/'
scriptFiles.forEach(filename => {
  // webpack支持带固定路径前缀的模板字符串动态引入，会自动将匹配到的所有文件纳入打包
  require(`${baseLegacyPath}${filename}`)
})

如果所有遗留JS都放在同一个目录下，也可以用require.context自动扫描目录，连文件名数组都不需要手动维护：

// 参数依次为：扫描的目录、是否递归扫描子目录、匹配文件的正则
const legacyContext = require.context('./legacy-scripts', false, /\.js$/)
legacyContext.keys().forEach(filePath => legacyContext(filePath))

该方案的优势是所有遗留JS都会被webpack处理，支持babel转译、代码压缩，会被合并到打包产物中，无需额外请求加载。

方案2：静态资源拷贝（零修改原有业务代码） #

如果不想改动现有遗留代码的动态script引入逻辑，可以用copy-webpack-plugin将所有遗留JS文件原样拷贝到打包输出目录，原有运行时加载逻辑完全不需要调整：

1. 首先安装插件：
   npm install copy-webpack-plugin --save-dev
2. 修改webpack配置：

const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
  // 其余webpack配置
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        // from填本地遗留JS文件所在目录，to填你代码里base_path对应的打包后路径
        { from: './src/legacy-scripts', to: 'base_path对应的输出目录' }
      ]
    })
  ]
}

该方案属于过渡方案，优势是业务代码零侵入，缺点是遗留JS不会参与webpack编译，无法做转译、压缩优化，运行时依然会发起数百个请求加载脚本。

方案3：自定义loader（适合多场景批量处理） #

如果项目中存在大量这类动态引入script的代码块，可编写自定义webpack loader，在编译阶段自动解析代码中的文件名数组，将其转换为对应的require语句，无需手动修改业务代码。该方案开发成本较高，仅适合有大量同类场景的项目使用。

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