最近项目中遇到了sourcemap不生效的问题,而且是有的项目生效,有的项目不生效, 经过一番查找资料,最终将问题解决,因此写篇文章以作备忘,也给后来者一个参考
关于webpack sourcemap
其实官方文档已经写得比较详细了, 需要注意的点是：
- 当
mode: production时不能用Development模式的sourcemap, 否则文件名都不会显示出来, 我测试时在production模式下使用eval-source-map时就出现了这种情况。 -
mode: production时推荐使用devtool: 'source-map'。 -
mode: development时推荐使用devtool: 'eval-source-map', 因为可以显示行号和源文件名,便于排查问题, 但这个模式初始化的时候要稍微慢一点。
Typescript项目
对于typescript项目, 如果你用的ts-loader, 请务必注意两个地方:
- tsconfig.json当中配置
sourceMap: true, 以下为一个示例配置
{
"compilerOptions": {
"outDir": "./dist",
"module": "commonjs",
"target": "es6",
"forceConsistentCasingInFileNames": true,
"allowJs": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"paths": {
"~common/*": ["src/common/*"],
"~model/*": ["src/model/*"],
"~orm/*": ["src/orm/*"],
"~load/*": ["src/load/*"]
},
"lib": [
"es5",
"es6",
"dom",
"es2015",
"esnext.asynciterable"
],
"types": ["node"],
"typeRoots": [
"node_modules/@types"
]
},
"exclude": [
"node_modules"
],
"include": ["src/server/handler.ts"]
}
- 正确配置
ts-loader
我们的ts项目sourcemap无法显示行号和源代码路径,就是挂在这里,对此,ts-loader官方github里有一个example, ts-loader一定要记得配置transpileOnly: true
module: {
rules: [
{
test: /.tsx?$/,
use: [
{ loader: 'ts-loader', options: { transpileOnly: true } }
],
}
]
},
