TS配合Webpack打包Node项目时提示无法找到模块'path'问题求助

修复方案 #

1. 解决内置模块找不到问题

在webpack.config.js根配置项中新增externalsPresets配置，自动识别并外置所有Node.js内置模块：

externalsPresets: {
  node: true
},

该配置会自动将path、fs、http等所有Node内置模块标记为运行时外部依赖，不会强制打包到产物中，也就不会出现模块找不到的报错。你之前手动配置externals只覆盖了单个模块，没有覆盖全部内置模块，所以没有生效。如果后续你需要外置整个node_modules目录的依赖，直接搭配webpack-node-externals使用即可，不需要额外配置allowlist，即可避免深层模块找不到的问题。

2. 按需配置打包产物结构

你当前的splitChunks.chunks默认值为async，只会拆分异步加载的模块，不会处理入口的初始依赖，所以所有第三方依赖都会打包到入口文件中。

• 如果你只需要单文件可移植产物，直接删除整个optimization.splitChunks配置即可，最终每个入口会生成独立的[entry].js文件，包含所有依赖，可直接运行。
• 如果你需要拆分入口对应的vendor包，将splitChunks修改为以下配置：

splitChunks: {
  chunks: 'all',
  minSize: 20000,
  minChunks: 1,
  maxAsyncRequests: 30,
  maxInitialRequests: 30,
  enforceSizeThreshold: 50000,
  cacheGroups: {
    defaultVendors: {
      test: /[\\/]node_modules[\\/]/,
      priority: -10,
      reuseExistingChunk: true,
      name: (module, chunks) => `${chunks[0].name}.vendor`
    },
    default: {
      minChunks: 2,
      priority: -20,
      reuseExistingChunk: true,
      name: (module, chunks) => `${chunks[0].name}.common`
    }
  }
}

修改后每个入口会生成对应的[entry].js业务代码文件和[entry].vendor.js第三方依赖文件。

3. 补充缺失的output配置

你当前的webpack配置缺少output配置项，新增以下配置和tsconfig的输出目录对齐：

output: {
  filename: '[name].js',
  path: path.resolve(__dirname, 'launch'),
  clean: true
},

修改后的完整webpack配置 #

const path = require('path');
module.exports = {
  target: 'node',
  mode: 'production',
  entry: {
    'gate': './src/Gate/index.ts',
    'patch': './src/Patch/index.ts',
    'auth': './src/Auth/index.ts',
    'account': './src/Account/index.ts',
    'proxy': './src/Proxy/index.ts',
  },
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'launch'),
    clean: true
  },
  externalsPresets: {
    node: true
  },
  stats: {warnings:false},
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      },
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  },
  optimization: {
    usedExports: true,
    chunkIds: 'natural',
    // 不需要拆分vendor就删除下面的splitChunks配置
    splitChunks: {
      chunks: 'all',
      minSize: 20000,
      minChunks: 1,
      maxAsyncRequests: 30,
      maxInitialRequests: 30,
      enforceSizeThreshold: 50000,
      cacheGroups: {
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          reuseExistingChunk: true,
          name: (module, chunks) => `${chunks[0].name}.vendor`
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
          name: (module, chunks) => `${chunks[0].name}.common`
        }
      }
    }
  }
};

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