webpack和source map

当 webpack 打包源代码时，可能会很难追踪到 error(错误) 和 warning(警告) 在源代码中的原始位置。

如果打包后代码有一处错误，特别是使用的vue、react这些前端框架。打包后很难定位问题。错误只能追踪到发生在打包后文件的哪个位置。打包后的文件不仅不方便阅读。还很难理解。

使用source map，就可以将编译后的代码映射回原始源代码。方便查看错误发生在原模块的哪个地方。

一般来说开发环境开启source map，线上环境关闭source map。

在webpack.config.js文件中配置source map

\ webpack.config.js
module.exports = {
    devtool: 'eval'
}

devtool的常用配置

• 生产模式一般使用 source-map , 会生成单独的 .map文件
• 开发模式一般使用 cheap-module-source-map

webpack使用source-map: 参考https://webpack.docschina.org/guides/development/#using-source-maps

webpack devtool的配置: 参考https://webpack.docschina.org/configuration/devtool/