如何配置Webpack，以便可以调试源文件而不是捆绑的文件？

如何解决如何配置Webpack，以便可以调试源文件而不是捆绑的文件？

由于某些原因，我需要使用webpack打包节点js源文件，但由于难以阅读，因此无法调试已编译的文件。使用console.log进行调试是有限的。有更好的解决方法吗？

这是项目示例：

树：

.
├── dist
├── index.js
├── node_modules
├── package.json
├── package-lock.json
├── router.js
├── webpack.config.js
├── yarn-error.log
└── yarn.lock

package.json：

{
  "name": "hello","version": "1.0.0","main": "index.js","license": "MIT","scripts": {
    "start": "npx webpack --config webpack.config.js && node --inspect-brk=9229 ./dist/bundle.js"
  },"dependencies": {
    "@koa/router": "^9.4.0","babel-cli": "^6.26.0","koa": "^2.13.0"
  },"devDependencies": {
    "babel-preset-env": "^1.7.0","webpack": "^4.44.1","webpack-cli": "^3.3.12"
  }
}

index.js：

import Koa from "koa";
const router = require('./router');

// 创建一个Koa对象表示web app本身:
const app = new Koa();

// 对于任何请求，app将调用该异步函数处理请求：
app.use(router.routes())
    .use(router.allowedMethods());

// 在端口3000监听:
app.listen(3000);
console.log('app started at port 3000...');

router.js：

const Router = require('@koa/router');
const router = new Router();

router.get('/hello',async (ctx,next) => {
    await next();
    ctx.response.type = 'text/html';
    ctx.response.body = '<h1>Hello,koa2!</h1>';
});

module.exports = router;

webpack.config.js：

const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry : './index.js',output: {
        path: path.resolve(__dirname,'dist'),filename: 'bundle.js'
    },target : "node",mode : "development",devtool : 'inline-source-map',plugins : [
        new webpack.sourceMapDevToolPlugin({
            filename : '[name].js.map'
        })
    ]
};

.babelrc：

{
    "sourceMaps": true,"presets": ["env"],"comments": false
}

解决方法

在配置中将devtool更改为source-map应该可以让您仅调试源代码。