SourceMap 组合规则

类型 含义
[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map
source-map 最完整的 sourcemap 文件，但是打包很慢
inline-source-map sourcemap 以 base64 格式内联在打包后的文件中
hidden-source-map 会生成外部 sourcemap 文件，但是i在目标文件中没有建立关联，不能准确提示错误位置
eval-source-map 会为每个模块生成单独的 sourcemap 文件进行内联，并使用 eval 执行
nosources-source-map 会生成 sourcemap 文件，可以看到源码目录结构，但是源码内容看不到
cheap-source-map 生成 sourcemap 文件，不包含列和 loader 的map
cheap-module-source-map 生成 sourcemap 文件，不包含列但包含 loader 的 map

使用 SourceMapDevToolPlugin 代替 devtool

  1. const webpack = require('webpack');
  2. module.exports = {
  3.   entry: {
  4.       hehehe: './index.js'
  5.   },
  6.     plugins: [
  7.       new webpack.SourceMapDevToolPlugin({
  8.         include: ['hehehe.js'],
  9.       exclude: /node_modules/,
  10.       filename: 'sourcemap/[name].js.map',
  11.       append: '\n//# sourceMappingURL=http://192.168.154.74:8080/sourcemap/[url]',
  12.       module: true,
  13.       columns: true,
  14.       noSources: false,
  15.     })
  16.   ]
  17. }

需要注意的是 mode 不要设置为 development，不然会有一些乱七八糟的 webpack HMR client js 会被注入进来编译为 sourcemap，而导致 sourcemap 产出失败

最佳实践

开发环境：eval-source-map
生产环境：hidden-source-map

  1. 生产环境使用了 hidden-source-map，在打包之后的源文件中没有 sourceMappingURL 映射，可以自己手动在浏览器
  2. 中 add source map 添加 sourcemap 路径，比如：http://localhost:8080/hehehe.js.map
  4. 这种源文件名对应 sourcemap 文件名的做法很容易被破解，所以最好是把 sourcemap 放到其他文件夹下，或者就换个
  5. 服务器存储

SourceMap 的问题

SourceMap 文件是否影响网页性能？

不会影响网页性能，因为虽然 source map 文件很大，可是一般用户是不会下载的。
SourceMap 下载时机：

  1. 如果添加了 sourceMappingURL 的映射链接，那么在打开浏览器 devtool 时会下载 .js.map

  2. 如果是 hidden-source-map 未添加 sourceMappingURL 的，则是在 add source map 时下载 .js.map

    浏览器怎么知道源文件和 SourceMap 的关系？

    总共有三种方式：

  3. 源文件最后有 sourceMappingURL 作为映射链接

  4. 浏览器中 add source map 手动添加映射
  5. 还可以通过设置 response header 的 SourceMap: 字段来表明

    sourceMap 是如何对应到源代码的？