使用 babel 和 webpack 时如何生成 sourcemap 文件？

在使用 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。

也许其他人曾经遇到过这个问题。如果您使用UglifyJsPluginin，webpack 2则需要显式指定该sourceMap标志。例如：

shell
new webpack.optimize.UglifyJsPlugin({ sourceMap: true })

带有源映射的 jsx 的最小 webpack 配置：

shell
var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: `./src/index.jsx` ,
  output: {
    path:  path.resolve(__dirname,"build"),
    filename: "bundle.js"
  },
  devtool: 'eval-source-map',
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  },
};

运行它：

shell
Jozsefs-MBP:react-webpack-babel joco$ webpack -d
Hash: c75d5fb365018ed3786b
Version: webpack 1.13.2
Time: 3826ms
        Asset     Size  Chunks             Chunk Names
    bundle.js   1.5 MB       0  [emitted]  main
bundle.js.map  1.72 MB       0  [emitted]  main
    + 221 hidden modules
Jozsefs-MBP:react-webpack-babel joco$

如果针对开发+生产进行优化，您可以在配置中尝试以下操作：

shell
const dev = process.env.NODE_ENV !== 'production'

// in webpack.shared.config

{
  devtool: dev ? 'eval-cheap-module-source-map' : 'source-map', 
}

来自文档：

• devtool：**“eval-cheap-module-source-map”**提供仅映射行（无列映射）并且速度更快的 SourceMap
• devtool：**“source-map”**无法缓存模块的 SourceMap，需要为块重新生成完整的 SourceMap。这是用于生产的东西。

另一种选择是假设您不需要用于生产构建的源映射，则为生产返回 false。

我正在使用 webpack 2.1.0-beta.19

在 Webpack 2 上，我尝试了所有 12 个开发工具选项。以下选项链接到控制台中的原始文件并保留行号。请参阅下面的注释：仅限行。

https://webpack.js.org/configuration/devtool

devtool 最佳开发选项

shell
                                build   rebuild      quality                       look
eval-source-map                 slow    pretty fast  original source               worst
inline-source-map               slow    slow         original source               medium
cheap-module-eval-source-map    medium  fast         original source (lines only)  worst
inline-cheap-module-source-map  medium  pretty slow  original source (lines only)  best

仅线路

源映射被简化为每行一个映射。这通常意味着每个语句有一个映射（假设您是这样编写的）。这可以防止您在语句级别调试执行以及在行的列上设置断点。与最小化结合是不可能的，因为最小化器通常只发出一行。

重新审视这一点

在一个大型项目中，我发现... eval-source-map 重建时间约为 3.5 秒 ... inline-source-map 重建时间约为 7 秒