Webpack 中使用source map 在开发过程中进行调试
2023-02-25 18:18:49 时间
我们都知道webpack在打包的时候会将源代码打包成一个bundle文件,bundle文件就是经过了loader转换,还有webpack的一些插件处理,以及webpack构建过程中的一些转换,最后会生成一个大的JS文件,直接去看这个文件是没法调试的。
source map是在开发过程中的一个利期,通过它我们在调试的时候可以定位到源代码,阮一峰老师的 JavaScript Source Map 详解写的比较详情细,大家可以去看看。source map一般是在开发环境开启,而在线上环境关闭,否则会暴露业务逻辑,非常不安全。在排查线上问题时可以将source map 上传到错误监控系统里面,以此来排查一些错误问题。
1. source map 关键字
1. eval:使⽤eval包裹模块代码;
2. source map:产⽣.map⽂件;
3.cheap:不包含列信息;
4. inline:将.map作为DataURI嵌⼊,不单独⽣成.map⽂件;
5. module:包含loader的source map;
2. source map 类型
source map的类型是可以根据关键字进行一个排列组合得到不同的类型。
3. source map的用法
module.exports = {
entry: './src/index.js',
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].js'
},
mode: 'development',
// 配置source-map类型
devtool: 'source-map'
};
相关文章
- Git多人协作
- Linux 下 Too many open files 问题排查与解决
- Linux 下安装 fail2ban
- Git 推送到多个远程仓库
- Github团队开发示例(二)
- Github团队开发示例(一)
- Github教程(3)
- Github教程(2)
- Github教程(1)
- Github教程(0)
- jenkins配置从git指定分支下载代码,打包部署jar包
- 一台电脑支持2个git账号:gitlab+github
- 资产收集神器-Goby工具
- phpStudy 2016搭建-upload-labs靶场
- Adobe Photoshop 2022(mac+windows全版本都有,包括最新的2023)
- PS 2021 软件安装包+安装教程(mac+windows全版本都有,包括最新的2023)
- 闻道Go语言,6月龄必知必会
- Go语言正/反向代理的姿势
- 你认识的C# foreach语法糖,真的是全部吗?
- PhpStudy 2016搭建-DVWA靶场