webpack和source map
2024-10-21 11:56:39
当 webpack 打包源代码时，可能会很难追踪到 error(错误) 和 warning(警告) 在源代码中的原始位置。
如果打包后代码有一处错误，特别是使用的vue、react这些前端框架。打包后很难定位问题。错误只能追踪到发生在打包后文件的哪个位置。打包后的文件不仅不方便阅读。还很难理解。
使用source map，就可以将编译后的代码映射回原始源代码。方便查看错误发生在原模块的哪个地方。
一般来说开发环境开启source map，线上环境关闭source map。
在webpack.config.js文件中配置source map
\\ webpack.config.js
module.exports = {
devtool: 'eval'
}
devtool的常用配置
- 生产模式一般使用
source-map, 会生成单独的 .map文件 - 开发模式一般使用
cheap-module-source-map
webpack使用source-map: 参考https://webpack.docschina.org/guides/development/#using-source-maps
webpack devtool的配置: 参考https://webpack.docschina.org/configuration/devtool/
最新文章
- 多线程更新UITableView时容易导致的问题
- UVa 694 - The Collatz Sequence
- word-wrap&&word-break，奇偶行、列设置样式
- 审计参数 audit_trail
- iOS之push present 动画
- Trianglify – 五彩缤纷的 SVG 背景图案
- Django搭建博客后台
- 在虚拟中开启Windows 8.1的Hyper-V平台
- CentOS 编译安装Apache2.4.10
- JDBC中PreparedStatement和Statement的区别
- Linux 之Cut命令详解
- Extraordinarily Tired Students UVA - 12108
- 手把手封装数据层之DataUtil数据库操作的封装
- ASP.NET MVC 下自定义 JsonResult，使用 Json.NET 序列化 JSON
- 二叉查找树，AVL树，伸展树【CH4601普通平衡树】
- 第5月第16天 php crud CodeIgniter CI_DB_active_record
- hadoop核心逻辑shuffle代码分析-map端
- JS替换URL中参数示例
- 一款基于jQuery的带Tooltip表单验证的注册表单
- Jmeter录制App 请求是HTTPS的