Webpack打包后动态require JS文件异常问题求助

嘿，这个动态require的坑我之前也踩过！咱们来一步步解决它：

问题根源拆解 #

1. 打包警告原因：Webpack是静态打包工具，编译阶段会扫描所有静态require/import来构建依赖图。但你用了require(path.resolve(__dirname, './test.js'))这种动态表达式，Webpack没法提前确定要加载的文件，所以抛出Critical dependency警告，同时不会把test.js纳入打包流程。
2. 运行时错误原因：打包后的index.js在dist目录，但你的test.js要么没被复制到dist，要么Webpack处理后的路径逻辑和你预期不符（虽然你设置了__dirname: false，但文件本身不在输出目录里）。

解决方案 #

分两种场景处理，匹配你的实际需求：

场景1：test.js是固定要加载的文件（只是用了动态路径写法）

这种情况最容易解决，既能消除警告，又能保证文件正确加载：

1. 自动复制文件到dist：安装copy-webpack-plugin，让Webpack打包时自动把源文件复制到输出目录：

   npm install copy-webpack-plugin --save-dev
   

2. 修改Webpack配置：添加插件配置，把src/test.js（假设你的源test.js在src目录）复制到dist：

   const nodeExternals = require('webpack-node-externals');
   const CopyPlugin = require('copy-webpack-plugin');
   
   module.exports = {
     entry: { index: "./src/index.ts" },
     output: { 
       filename: "[name].js", 
       path: __dirname + '/dist' // 明确输出路径，避免歧义
     },
     target: "node",
     externals: [ nodeExternals() ],
     node: { "__dirname": false },
     resolve: { extensions: [".ts", ".tsx", ".js"] },
     module: {
       rules: [ { test: /\.tsx?$/, loader: "ts-loader" } ]
     },
     plugins: [
       new CopyPlugin({
         patterns: [
           { from: './src/test.js', to: './test.js' }, // 把test.js复制到dist根目录
         ],
       }),
     ],
   };
   

3. 简化代码（可选）：如果不需要动态路径逻辑，直接写成静态require，Webpack会自动处理，警告也会彻底消失：

   // src/index.ts
   require('./test.js');
   

场景2：需要真正的动态加载（路径不固定，比如根据变量切换文件）

如果你的加载路径是完全动态的（比如依赖用户输入或环境变量），那需要让Webpack忽略这个动态依赖，同时保证运行时文件在正确位置：

1. 保留__dirname: false配置：这个设置是对的，确保Node运行时使用原生__dirname（指向dist目录下index.js的所在路径）。
2. 消除警告（可选）：如果不想看到打包警告，可以在动态require前添加注释告诉Webpack忽略该依赖：

   // src/index.ts
   // webpackIgnore: true
   require(path.resolve(__dirname, './test.js'));
   

3. 手动保证文件存在：不管Webpack，你需要确保运行时dist目录下有目标文件（可以手动复制，或者在package.json里加一个打包后复制的脚本）。

验证 #

修改完成后：

• 执行webpack -p，警告应该消失（或仅保留你允许的提示）。
• 运行node dist/index.js，就能看到test.js里的日志输出了。

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