configureWebpack devtool
时间: 2023-09-30 13:03:09 浏览: 53
`configureWebpack`是一个用于配置Webpack的函数,而`devtool`是Webpack中用于生成source map的选项。
`devtool`有很多不同的选项,每个选项都会影响到在浏览器中调试JavaScript代码时的体验。下面是一些常用的选项:
- `eval`: 生成代码的映射关系,以`eval`打头的`sourceURL`表示原始文件位置,没有映射文件,因此无法重构代码。
- `cheap-eval-source-map`: 生成代码的映射关系,以`eval`打头的`sourceURL`表示原始文件位置,生成的映射文件不包含源代码中的列信息。
- `cheap-module-eval-source-map`: 生成代码的映射关系,以`eval`打头的`sourceURL`表示原始文件位置,生成的映射文件不包含源代码中的列信息,同时会把`module`转换后的代码映射回原始代码。
- `eval-source-map`: 生成代码的映射关系,以`source-map`打头的`sourceURL`表示原始文件位置,生成的映射文件包含源代码中的列信息。
- `cheap-source-map`: 生成代码的映射关系,以`source-map`打头的`sourceURL`表示原始文件位置,生成的映射文件不包含源代码中的列信息。
- `cheap-module-source-map`: 生成代码的映射关系,以`source-map`打头的`sourceURL`表示原始文件位置,生成的映射文件不包含源代码中的列信息,同时会把`module`转换后的代码映射回原始代码。
- `source-map`: 生成代码的映射关系,以`source-map`打头的`sourceURL`表示原始文件位置,生成的映射文件包含源代码中的列信息。
`devtool`的选项越强,生成的source map越大,调试时的性能开销也越大。一般来说,开发环境下可以使用较强的选项,生产环境下可以使用较轻的选项或者不生成source map。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)