如何配置Webpack以调试Node.js源文件而非打包后的文件？

我完全理解你的困扰——Webpack打包后的代码经过合并、转译，可读性极差，靠console.log调试确实太受限了。不过通过优化配置和利用Node.js的原生调试工具，你可以实现和调试源码几乎一样的体验，下面结合你的项目给出具体方案：

1. 优化Source Map配置（核心） #

Source Map是关联打包后代码和原始源码的关键，你的配置已经有了基础，但可以更精准：

• 简化Webpack的Source Map设置：你当前同时用了devtool: 'inline-source-map'和SourceMapDevToolPlugin，其实这两者功能重复了。建议保留devtool并调整为source-map，它会生成单独的.map文件，既不增大bundle体积，又能让Node.js正确解析：
  修改你的webpack.config.js：

  const path = require('path');
  const webpack = require('webpack');
  const nodeExternals = require('webpack-node-externals'); // 后面会用到的插件，先提前引入
  
  module.exports = {
    entry : './index.js',
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: 'bundle.js'
    },
    target : "node",
    mode : "development",
    devtool : 'source-map', // 替换为source-map，生成独立的map文件
    externals: [nodeExternals()], // 新增：排除node_modules依赖，让bundle更简洁
    // 移除重复的SourceMapDevToolPlugin
  };
  

• 确保Babel的Source Map生效：你的.babelrc里已经设置了"sourceMaps": true，这个是对的，它会让Babel转译后的代码也生成Source Map，保证ES6源码到转译代码再到打包代码的完整映射。

2. 用Chrome DevTools可视化调试 #

你已经在package.json的start脚本里加了--inspect-brk=9229，这一步非常关键，接下来只需要：

1. 运行npm start，此时Node.js会暂停在代码入口，等待调试连接
2. 打开Chrome浏览器，输入chrome://inspect
3. 点击页面中的「Configure」按钮，添加localhost:9229到目标列表
4. 返回inspect页面，会看到「Target (localhost:9229)」，点击「inspect」进入调试界面
5. 在DevTools的「Sources」面板中，展开webpack:// -> .，就能找到你的index.js和router.js原始源码，直接设置断点、查看变量、单步调试，和调试未打包的源码完全一样！

3. 可选：用VS Code直接调试（更高效） #

如果习惯用VS Code开发，可以配置调试环境：

1. 在项目根目录创建.vscode/launch.json文件，内容如下：

   {
     "version": "0.2.0",
     "configurations": [
       {
         "type": "node",
         "request": "launch",
         "name": "Debug Webpack Bundle",
         "program": "${workspaceFolder}/dist/bundle.js",
         "sourceMaps": true,
         "smartStep": true,
         "skipFiles": ["<node_internals>/**"]
       }
     ]
   }
   

2. 运行Webpack打包（执行npm run start完成打包），然后在VS Code的「运行和调试」面板选择「Debug Webpack Bundle」启动调试，就能直接在VS Code里断点调试你的原始源码了。

4. 额外优化：排除node_modules依赖 #

上面的配置里用到了webpack-node-externals插件，它会让Webpack不打包node_modules里的依赖，而是保留require引用，这样你的bundle文件只会包含自己的源码，体积更小，调试时也不会加载大量第三方库的代码，体验更流畅。安装这个插件：

npm install webpack-node-externals --save-dev

总结 #

通过以上配置，你完全摆脱了打包后代码可读性差的问题，不管是用Chrome DevTools还是VS Code，都能像调试未打包的Node.js代码一样高效调试。再也不用依赖console.log来排查问题了！

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