Webpack中devtool增强调试过程

我们可以通过 devtool 来设置增强调试过程

通过设置devtool生成source map

Source Map

1. source map 是一个信息文件，里面存储着代码压缩前后的位置信息。
2. 即可以在Debug时直接显示原始代码的位置信息，而不是压缩后的，极大方便后期调试

开发环境下默认生成的Source Map ，记录的是生成后的代码的位置。会导致运行时报错的行数与源代码的行数不一致的问题

解决方案：在webpack.dev.config.js中添加如下配置，即可保证运行时报错的行数与源代码的行数保持一致

xxxxxxxxxx
const commonConfig = require("./webpack.config");
const { merge } = require("webpack-merge");

const devConfig = {
    mode: 'development',
    //此选项生成的 Source Map 能保证运行时的报错行数与源代码的行数保持一致
    devtool:'source-map'
}

module.exports = merge(commonConfig,devConfig)

Source Map 的最佳实践

1. 开发模式下

   建议直接把devtool 的值设置为source-map,可以直接定位到具体的错误行

2. 生产环境下

   建议关闭Source Map 或者 将devtool 设置为 hidden-nosources-source-map,防止源码泄漏，提高网站的安全性