我有一个通过Webpack,ts-loader和tsconfigpaths用打字稿和编译器编写的Monorepository NodeJS项目,但是生成的源映射无法用于VSCode。
当打字稿编译器生成源映射时,它已从out目录引用相对于源文件的位置:
dist / main.js.map
source: ["../src/main.ts"]
但是,当webpack编译源映射时,它是相对于tsconfig目录的。 (注意区别: ./
与 ../
)
dist / main.js.map
source: ["./src/main.ts"]
我找到了解决此问题的方法,但感觉不对。我也已经将webpack上下文路径更改为该文件夹,并在入口文件前加上了../
。
entry: "../src/main.ts",
context: path.resolve(__dirname, "dist"),
下面是我当前使用的webpack配置文件,该文件生成不正确的源映射。我希望SourceMapDevToolPlugin包含一些属性,例如“上下文”。它确实包含“ fileContext”属性,但似乎不影响任何输出。
{
mode: "development",
target: "node",
entry: "./src/main.ts",
output: {
filename: "main.js",
path: path.resolve(__dirname, "dist"),
},
externals: [nodeExternals()],
module: {
rules: [
{
test: /\.ts$/,
exclude: /node_modules/,
loader: "ts-loader",
},
],
},
resolve: {
extensions: [".js", ".ts"],
plugins: [new TsconfigPathsPlugin()],
},
devtool: false,
plugins: [
new webpack.SourceMapDevToolPlugin({
filename: "[name].js.map",
moduleFilenameTemplate: "[resource-path]",
noSources: true,
module: true,
}),
],
}