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

Question

由于某些原因，需要使用webpack打包nodejs源文件，但是编译后的文件太难看，无法调试。使用 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
}

Answer 1

在配置中将 devtool 更改为 source-map 应该允许您只调试源代码。

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

How can I configure my webpack so that I can debug my source files instead of the bundled files?

javascript

node.js

webpack

babeljs