7. Source Map

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

为了更容易地追踪 error 和 warning，JavaScript 提供了 source maps 功能，可以将编译后的代码映射回原始源代码。

简单来说： source map 追踪映射源代码的错误

修改开发环境配置文件 webpack.dev.js：

module.exports = {
  // 开发工具，开启 source map，编译调试
  devtool: 'eval-cheap-module-source-map',
}

完成上述配置后，可以通过 npx webpack —config config/webpack.prod.js 打包编译。

编译后，会生成这样的目录结构：