Webpack 4与ts-loader无法生成Source Map文件问题求助

嘿，我来帮你排查这个问题！核心原因其实出在你配置的devtool选项上——你用的"inline-source-map"会把Source Map直接内嵌到输出的server.js文件中，而不会生成单独的.map文件，这就是你找不到独立文件的原因。

解决方案：改用生成独立Source Map的devtool选项 #

根据你的Node.js项目场景，推荐使用以下几个devtool值：

• source-map：生成独立的.map文件，同时在打包后的server.js末尾添加注释（比如//# sourceMappingURL=server.js.map）来关联源映射文件，这是最标准的生产/开发通用选项。
• cheap-module-source-map：生成独立的.map文件，编译速度更快，仅保留行信息（忽略列信息），适合开发阶段使用。
• inline-source-map（如果你想保留内嵌方式）：不用改配置，但要检查server.js文件的末尾，会有一段Base64编码的Source Map内容，以//# sourceMappingURL=data:application/json;base64,...开头。

修改后的配置示例：

const path = require('path');
module.exports = {
  mode: "development",
  devtool: "source-map", // 这里改成生成独立文件的选项
  entry: './server/server.ts',
  output: {
    filename: 'server.js',
    path: path.resolve(__dirname, 'dist')
  },
  resolve: {
    extensions: [ '.tsx', '.ts', '.js' ]
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  target: 'node',
  // 你的其他node配置...
};

额外检查点 #

1. 命令行参数冲突：你用的webpack -d参数会默认设置devtool: "eval-cheap-module-source-map"，但如果配置文件里已经显式指定了devtool，配置文件的优先级更高，所以不用太担心这个冲突。
2. Node环境兼容性：因为你设置了target: 'node'，避免使用eval类的devtool选项（比如eval-source-map），这类选项在Node.js环境下可能无法正常解析，而source-map/cheap-module-source-map是完全兼容的。
3. webpack版本：确保你使用的webpack版本（建议4.x及以上）支持你选择的devtool选项，不同版本的选项命名可能有细微差异。

修改配置后重新执行打包命令webpack -d --config webpack.config.js，就能在dist目录下看到生成的server.js.map文件啦！

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