【笔记】Webpack的SourceMap

发表于 更新于 阅读次数：

前言

Webpack的SourceMap解决了打包后的bundle.js在浏览器中调试困难的问题

eval

  • 缺省值，每个模块会封装到eval里包裹起来，并且会在末尾追加注释//@sourceURL
webpack.config.js
1
2
3
module.exports = {
  devtool: "eval",
}

source-map

  • 生成一个SourceMap文件
webpack.config.js
1
2
3
module.exports = {
  devtool: "source-map",
}

hidden-source-map

  • 生成一个SourceMap文件，但不会在bundle末尾追加注释
webpack.config.js
1
2
3
module.exports = {
  devtool: "hidden-source-map",
}

inline-source-map

  • 生成一个DataUrl形式的SourceMap文件
webpack.config.js
1
2
3
module.exports = {
  devtool: "inline-source-map",
}

eval-source-map

  • 每个模块会通过eval()函数来执行，并且生成一个DataUrl形式的SourceMap
webpack.config.js
1
2
3
module.exports = {
  devtool: "eval-source-map",
}

cheap-source-map

  • 生成一个没有列信息的SourceMaps文件，不包含loader的SourceMap
webpack.config.js
1
2
3
module.exports = {
  devtool: "cheap-source-map",
}

cheap-module-source-map

  • 生成一个没有列信息的SourceMaps文件，同时loader的SourceMap也被简化为只包含对应行的信息
webpack.config.js
1
2
3
module.exports = {
  devtool: "cheap-module-source-map",
}

完成

参考文献

哔哩哔哩——微笑专业教前端