How do I generate sourcemaps when using babel and webpack?

在使用 Babel 和 Webpack 时，生成sourcemap主要是为了帮助开发者在调试过程中能够追踪到原始源代码，而不是转换后的代码。Sourcemap 是一种映射关系，它可以将压缩、合并或转换后的代码映射回原始源文件。下面是如何在 Babel 和 Webpack 中生成 sourcemap 的步骤：

1. 配置 Babel 生成 sourcemap： 在使用 Babel 时，可以在 .babelrc 配置文件中或者 Babel 的命令行参数中指定 sourceMaps 选项。例如，在 .babelrc 文件中，您可以添加：

   json
   {
     "presets": ["@babel/preset-env"],
     "sourceMaps": true
   }

   这会让 Babel 在转换代码时生成对应的 sourcemap 文件。

2. 配置 Webpack 生成 sourcemap： 在 Webpack 配置文件 webpack.config.js 中，您需要设置 devtool 选项来指定生成 sourcemap 的类型。有多种 sourcemap 类型可供选择，例如：

   • source-map：在一个单独的文件中生成完整的sourcemap，提供完整的源代码映射，但可能会减慢构建速度。
   • cheap-module-source-map：生成较快的sourcemap，但不包含列信息。
   • eval-source-map：生成较快的sourcemap，适合开发环境。

   根据您的需求选择合适的类型。示例配置如下：

   javascript
   const path = require('path');
   
   module.exports = {
     entry: './src/index.js',
     output: {
       filename: 'bundle.js',
       path: path.resolve(__dirname, 'dist'),
     },
     devtool: 'source-map', // 选择合适的sourcemap类型
     module: {
       rules: [
         {
           test: /\.js$/,
           exclude: /node_modules/,
           use: {
             loader: 'babel-loader',
             options: {
               presets: ['@babel/preset-env'],
               sourceMaps: true, // 确保 Babel 能够生成 sourcemap
             },
           },
         },
         // 其他 loaders 配置...
       ],
     },
     // 其他 Webpack 配置...
   };

   在上述配置中，Webpack 会在构建过程中生成sourcemap文件，并在生成的 bundle.js 文件中添加引用注释，这样浏览器调试工具就可以链接到源代码。

通过这样的配置，当你运行 webpack 构建时，它会输出包含正确sourcemap的代码，这样开发者就能在浏览器的开发者工具中看到原始的源代码，而不是经过转换的代码，极大地方便了调试。

为了使用源映射，您应该将devtool选项_值_从更改true为中可用的_值_this list，例如source-map

shell
devtool: 'source-map'

devtool: 'source-map'- 发出 SourceMap。