devtool让源码在浏览器中可调试
我们在webpack配置文件中新增devtool字段,并设置值为source-map,这样我们就可以在浏览器中直接调试我们的源码,在控制台的sources下,点开可以看到webpack://目录,里面可以直接看到我们开发态的源代码,这样方便我们直接在浏览器中打断点调试。
代码清单:webpack.config.js
devtool: 'source-map'
devtool可以有几个配置项:
| devtool | build speed | rebuild speed | production supported | quality |
|---|---|---|---|---|
| eval | +++ | +++ | no | generated code |
| cheap-eval-source-map | + | ++ | no | transformed code (lines only) |
| cheap-source-map | + | o | yes | transformed code (lines only) |
| cheap-module-eval-source-map | o | ++ | no | original source (lines only) |
| cheap-module-source-map | o | - | yes | original source (lines only) |
| eval-source-map | – | + | no | original source |
| source-map | – | – | yes | original source |