如何在 webpack 中调试节点 js 文件

在开发 Node.js 应用程序时，多数情况下我们会使用 Webpack 进行打包。但是，如果代码存在问题，如何进行调试呢？本文将介绍如何在 Webpack 中调试节点 js 文件。

步骤

1. 首先，需要安装一个叫做 source-map-support 的工具。这个工具可以帮助我们在调试时，将源代码映射到生成后的代码中。

   npm install source-map-support --save-dev
   

2. 创建一个启动脚本 start.js，代码如下：

   require('source-map-support').install();
   require('./app');
   

   其中 app.js 是你的应用程序主入口。

3. 修改 webpack.config.js 文件，为 Webpack 增加一个配置项：

   const webpack = require('webpack');
   const StartServerPlugin = require('start-server-webpack-plugin');
   
   module.exports = {
     // ...其他配置
     watch: true,
     entry: ['webpack/hot/poll?1000', './src/index'],
     target: 'node',
     plugins: [
       // ...
       new StartServerPlugin('start.js'),
     ],
   };
   

   这个配置项会启动一个 Node.js 服务器，并在代码发生变化时进行热更新，这对于调试来说非常方便。

4. 运行 Webpack：

   webpack --config webpack.config.js --watch --devtool source-map
   

   配置 --devtool source-map 表示要生成 source map 文件，方便我们进行调试。

5. 运行你的应用程序：

   node --inspect --require=./start.js dist/start.js
   

   这个命令会使用 Node.js 内置的调试器，在应用程序启动时加载 start.js 文件，并启用 Chrome DevTools 进行调试。

6. 打开 Chrome DevTools，即可开始调试。在 Sources 面板中，我们可以看到原始的源代码，并在其中进行断点调试。

结论

在 Webpack 中调试节点 js 文件不是很困难。只需要安装 source-map-support 工具，使用 start-server-webpack-plugin 插件启动 Node.js 服务器，并使用 Node.js 内置的调试器即可。同时，使用 Chrome DevTools 进行断点调试是非常方便的。