Webpack SourceMap 配置

最近项目中遇到了sourcemap不生效的问题,而且是有的项目生效,有的项目不生效, 经过一番查找资料,最终将问题解决,因此写篇文章以作备忘,也给后来者一个参考

关于webpack sourcemap

其实官方文档已经写得比较详细了, 需要注意的点是：

1. 当mode: production时不能用 Development 模式的sourcemap, 否则文件名都不会显示出来, 我测试时在production模式下使用eval-source-map时就出现了这种情况。
2. mode: production 时推荐使用 devtool: 'source-map'。
3. mode: development 时推荐使用 devtool: 'eval-source-map', 因为可以显示行号和源文件名,便于排查问题, 但这个模式初始化的时候要稍微慢一点。

   Typescript项目

   对于typescript项目, 如果你用的ts-loader, 请务必注意两个地方:
4. 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"]
   }

5. 正确配置ts-loader
   我们的ts项目sourcemap无法显示行号和源代码路径,就是挂在这里,对此,ts-loader官方github里有一个example, ts-loader一定要记得配置transpileOnly: true

   module: {
         rules: [
             {
                 test: /.tsx?$/,
                 use: [
                     { loader: 'ts-loader', options: { transpileOnly: true } }  
                 ],
             }
         ]
     },