我想使用带有VSCode调试器的webpack调试React程序。调试器进程未在运行/启动，并在几秒钟内终止。不知道我在这里的设置/配置中缺少什么来在VSCode中调试它。感谢您的反馈和帮助。
VSCode 1.27版 Webpack版本3.5.5 Node JS版本10.10.0
Mac-OS中的文件夹结构示例：
/Users/pj/documents/repo/proj/
/Users/pj/documents/repo/proj/webpack.config.js
/Users/pj/documents/repo/proj/webpack.dist.js
/Users/pj/documents/repo/proj/dist/
/Users/pj/documents/repo/proj/dist/app.js
/Users/pj/documents/repo/proj/dist/index.html
/Users/pj/documents/repo/proj/functions/
/Users/pj/documents/repo/proj/node_modules/
/Users/pj/documents/repo/proj/src/
/Users/pj/documents/repo/proj/src /components/
/Users/pj/documents/repo/proj/src/fonts/
/Users/pj/documents/repo/proj/src/images/
/Users/pj/documents/repo/proj/src/pages/
/Users/pj/documents/repo/proj/src/scss/
/Users/pj/documents/repo/proj/src/app.js
/Users/pj/documents/repo/proj/src/styles.css
/Users/pj/documents/repo/proj/src/index.template.html
webpack.config.js
var HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
var path = require('path');
module.exports = {
devtool: 'eval_source_map',
context: path.resolve(__dirname, "src"),
entry:
[
'../node_modules/react-hot-loader/patch',
'../node_modules/webpack/hot/only-dev-server',
'./app.js'
],
output:
{
filename: 'app.js',
path: __dirname + '/dist',
},
plugins:
[
new HtmlWebpackPlugin({
template: 'index.template.html',
inject: 'body'
}) ,
new CopyWebpackPlugin([
{ from: 'images', to: 'images' }
]),
new CopyWebpackPlugin([
{ from: 'fonts', to: 'fonts' }
]),
],
module:
{
loaders:
[
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "url-loader?limit=10000&mimetype=application/font-woff"
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "file-loader"
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query:
{
presets: ['es2015','react']
}
},
{
test: /\.css$/, loader: 'style-loader!css-loader'
},
{
test: /\.png$/, loader: 'url-loader?limit=100000'
},
{
test: /\.jpg$/, loader: 'file-loader'
}
]
}
}
launch.json
{
"version": "0.2.0",
"configurations":
[
{
"type": "chrome",
"request": "attach",
"name": "Attach to Chrome",
"port": 9222,
"webRoot": "${workspaceFolder}/node_modules",
"sourceMaps": true,
"trace": true,
"sourceMapPathOverrides":
{
"webpack:///*": "/*"
}
},
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}/node_modules",
"sourceMaps": true,
"trace": true,
"sourceMapPathOverrides":
{
"webpack:///*": "/*"
}
},
{
"type": "node",
"request": "launch",
"name": "webpack",
"program":"/Users/pj/documents/repo/proj/node_modules/webpack/bin/webpack.js",
"sourceMaps": true,
"trace": true,
"sourceMapPathOverrides":
{
"webpack:///*": "/*"
}
}
]
}
webpack.dist.js
var HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
var path = require('path');
module.exports = {
cache: false,
context: __dirname + '/src',
entry:
[
'./app.js'
],
output:
{
filename: 'app.js',
path: __dirname + '/dist',
publicPath : '/'
},
plugins: [
new HtmlWebpackPlugin({
template: 'index.template.html',
inject: 'body'
}) ,
new CopyWebpackPlugin([
{
from: 'images', to: 'images' }
]),
new CopyWebpackPlugin([
{
from: 'fonts', to: 'fonts' }
]),
],
module: {
loaders: [
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "url-loader?limit=10000&mimetype=application/font-woff"
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "file-loader"
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
query: {
presets: ['es2015','react']
}
},
{
test: /\.css$/, loader: 'style-loader!css-loader'
},
{
test: /\.png$/, loader: 'url-loader?limit=100000'
},
{
test: /\.jpg$/, loader: 'file-loader'
}
]
}
}
跟踪文件的示例：
...
SourceMaps.getMapForGeneratedPath: Finding SourceMap for /Users/pj/documents/repo/proj/node_modules/postcss-modules-values/node_modules/postcss/lib/rule.js by URI: data:<I deleted code here for brevity>...
SourceMaps.getMapForGeneratedPath: Using inlined sourcemap in /Users/pj/documents/repo/proj/node_modules/postcss-modules-values/node_modules/postcss/lib/rule.js
SourceMap: creating for /Users/pj/documents/repo/proj/node_modules/postcss-modules-values/node_modules/postcss/lib/rule.js
SourceMap: sourceRoot: undefined
SourceMap: sources: ["rule.es6"]
SourceMap: no sourceRoot specified, using script dirname: /Users/pj/documents/repo/proj/node_modules/postcss-modules-values/node_modules/postcss/lib
SourceMaps.scriptParsed: /Users/pj/documents/repo/proj/node_modules/postcss-modules-values/node_modules/postcss/lib/rule.js was just loaded and has mapped sources: ["/Users/pj/documents/repo/proj/node_modules/postcss-modules-values/node_modules/postcss/lib/rule.es6"]
…许多此类错误，在跟踪文件中有类似的错误消息…
Paths.scriptParsed: could not resolve events.js to a file with
pathMapping/webRoot: undefined. It may be external or served directly from the
server's memory (and that's OK).
...
Paths.scriptParsed: could not resolve
/Users/pj/Documents/repo/proj/node_modules/css-loader/lib/createResolver.js to
a file with pathMapping/webRoot: undefined. It may be external or served
directly from the server's memory (and that's OK).
...
Paths.scriptParsed: could not resolve
webpack:///../node_modules/webpack/buildin/module.js? to a file with
pathMapping/webRoot: undefined. It may be external or served directly from the
server's memory (and that's OK).