webpack：devtool配置中的source map

devtool控制是否生成，以及如何生成 source map

一、功能作用

source-map：一种提供源代码到构建后代码映射技术
如果构建后代码出错了，通过映射可以追踪源代码错误

二、配置文件

webpack.config.js

const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'js/built.js',
    path: resolve(__dirname, 'build')
  },
  module: {
    rules: [
      // loader的配置
      {
        // 处理less资源
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      },
      {
        // 处理css资源
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  },
  plugins: [
    // plugins的配置
    new HtmlWebpackPlugin({
      template: './src/index.html'
    })
  ],
  mode: 'development',
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    compress: true,
    port: 3000,
    open: true,
    hot: true // HMR热模块替换
  },
  devtool: 'source-map'
};

三、source map格式

devtool: '[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map'

选择一种 source map 格式来增强调试过程。
不同的值会明显影响到构建(build)和重新构建(rebuild)的速度。

（1）source-map

devtool: 'source-map'

source-map：外部
提供：错误代码准确信息 和 源代码的错误位置

整个 source map 作为一个单独的文件生成。它为 bundle 添加了一个引用注释，以便开发工具知道在哪里可以找到它。

（2）inline-source-map

devtool: 'inline-source-map'

source-map：内联
提供：错误代码准确信息 和 源代码的错误位置
只生成一个内联source-map

source map 转换为 DataUrl 后添加到 bundle 中。

（3）hidden-source-map

devtool: 'hidden-source-map'

source-map：外部
提供：错误代码错误原因，但是没有错误位置
不能追踪源代码错误，只能提示到构建后代码的错误位置

与 source-map 相同，但不会为 bundle 添加引用注释。如果你只想 source map 映射那些源自错误报告的错误堆栈跟踪信息，但不想为浏览器开发工具暴露你的 source map，这个选项会很有用。

（4）eval-source-map

devtool: 'eval-source-map'

source-map：内联
提供：错误代码准确信息 和 源代码的错误位置

每一个文件都生成对应的source-map，都在eval

每个模块使用 eval() 执行，并且 source map 转换为 DataUrl 后添加到 eval() 中。初始化 source map 时比较慢，但是会在重新构建时提供比较快的速度，并且生成实际的文件。行数能够正确映射，因为会映射到原始代码中。它会生成用于开发环境的最佳品质的 source map。

（5）nosources-source-map

devtool: 'nosources-source-map'

source-map：外部
提供：错误代码准确信息, 但是没有任何源代码信息

创建的 source map 不包含 sourcesContent(源代码内容)。它可以用来映射客户端上的堆栈跟踪，而无须暴露所有的源代码。你可以将 source map 文件部署到 web 服务器。

（6）cheap-source-map

devtool: 'cheap-source-map'

source-map：外部
提供：错误代码准确信息 和 源代码的错误位置
只能精确的行

没有列映射(column mapping)的 source map，忽略 loader source map。

（7）cheap-module-source-map

devtool: 'cheap-module-source-map'

source-map：外部
提供：错误代码准确信息 和 源代码的错误位置
module会将loader的source map加入

没有列映射(column mapping)的 source map，将 loader source map 简化为每行一个映射(mapping)。

四、内联 和 外部 的区别

1. 外部：在built.js的外部生成built.js.map文件，而内联没有
2. 内联构建速度更快

五、根据环境配置devtool

（1）开发环境

要求：速度快，调试更友好
配置：eval-source-map / eval-cheap-module-souce-map

• 速度快(eval>inline>cheap>…)：

eval-cheap-souce-map
eval-source-map

• 调试更友好：

souce-map
cheap-module-souce-map
cheap-souce-map

（2）生产环境

要求：源代码要不要隐藏? 调试要不要更友好？
配置：source-map / cheap-module-souce-map

内联会让代码体积变大，所以在生产环境不用内联

nosources-source-map // 源代码和构建后代码全部隐藏
hidden-source-map // 只隐藏源代码，会提示构建后代码错误信息