Webpack devtool sourceMap 配置一般本地开发都会选择配置sourceMap，以便程序出错后更好的

一般本地开发都会选择配置sourceMap，以便程序出错后更好的debug。如果上线到prod的话又会关闭它。之前虽然知道webpack提供了多种devtool的配置，但是一直没仔细了解过，今天花时间研究了下写篇文章记录下。

测试环境准备：

npx create-react-app react-test --template typescript
进入到react-test目录, 查看package.json得到使用的webpack版本, 执行npm run eject后就会暴露出所有的配置信息。

"webpack": "^5.64.4",

"webpack-dev-server": "^4.6.0"

npm install antd
更改tsconfig.json, 增加一行"noImplicitAny": false
更改App.tsx为以下内容

import {Button} from 'antd';
import 'antd/dist/antd.min.css';
function App() {
  console.log('......')
  let c;

  const onClick = () => {
    console.log('c is ', c.test);
  }
  return (
    <div className="App" onClick={onClick}>
      
      <Button type="primary" onClick={onClick}>button</Button>
    </div>
  );
}

export default App;

更改scripts/build.js，设置测试环境为development

执行npm run build, 生成bundle文件。如果想在本地run这些文件，推荐安装serve，然后执行serve -s build, 打开浏览器http://localhost:3000 即可。

测试用例

更改config/webpack.config.js文件，设置devtool为不同的值，然后npm run build后直接浏览器http://localhost:3000 查看

格式：

^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$

devtool: eval

可以定位到行列，如果检查webpack生成的build.js文件，会发现App.tsx相关的打包代码后面有一行 # sourceURL=/react-test/src/App.tsx

devtool: "eval-source-map"

可以定位到行列，相比第一种eval，在Source这边多了个webpack-internal文件夹。App.tsx可以map到源文件。如何查看生成的bundle.js文件，定位到App.tsx那，会发现相比eval的case，多了一行# sourceMappingURL=data:application/json;charse....

devtool: inline-source-map

可以定位到行列

打开bundle.js, 在最下面有一行/# sourceMappingURL=data:application/json;charset=utf-8;base64,..

devtool: hidden-source-map

点开可以定位到行列，但不是源文件。这个配置的意思是帮助我们生成了sourceMap，但是不会进行关联，所以你在dev tool里面没办法看到源文件信息。

devtool: xx-cheap-xx

如果中间加了cheap，那么只会定位到行，而不是列。

devtool: nosources-xx

一般生成的sourceMap文件都会带有sourcesContent这个属性，里面会保存所有源文件的内容，这样会使得sourceMap的体积变大。这个配置就可以不生成这个sourceContents属性, 一般不建议这样做。

总结:

一般开发的时候建议设置为eval-cheap-module-source-map, 生产的话设置为false或者hidden.