webpack之source map
先来一个webpack小例子，项目结构如下：
// greeter.js
module.exports = function() {
var greet = document.createElement('div');
greet.textContent = "Hi there and greetings!";
return greet;
}; // main.js
const greeter = require('./Greeter.js');
document.querySelector("#root").appendChild(greeter()); // webpack.config.js
module.exports = {
// devtool: 'eval-source-map',
entry: __dirname + "/main.js",
output: {
path: __dirname + "/dist",
filename: "bundle.js"
}
} // index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body id="root"></body>
<script src="dist/bundle.js"></script>
</html>
运行结果：
页面上正常显示：“Hi there and greetings!”。
以上的例子很简单，可以直接在bundle.js中打断点进行调试。但是对于复杂的webpack程序，模块很多，如果全都在bundle中打断点进行调试，会很混乱，那该如何方便调试模块里面的逻辑呢？答案是使用webpack的source map选项。
在以上的配置文件中打开注释：
// devtool: 'eval-source-map',
然后重新运行。然后打开浏览器的调试窗口，发现多了些东西：
双击这些文件，可以很方便地对不同js文件中的代码进行调试。
以上仅仅用到了source map的一个选项，其他的可以在这里进行参考和尝试
webpack之source map的更多相关文章
- 第五十八篇：webpack的Source Map
好家伙,Source Map没听过 1.什么是Source Map? 字面意义上来看应该是个好东西 Source Map 就是一个信息文件,里面储存着位置信息. 也就是说,Source Map 文件中 ...
- [Javascript] Webpack Loaders, Source Maps, and ES6
Using ES6 To use ES6, we need loader. Modify webpack.config.js file: module.exports = { entry: './in ...
- 【转】webpack中关于source map的配置
Webpack中sourcemap的配置 sourcemap是为了解决开发代码与实际运行代码不一致时帮助我们debug到原始开发代码的技术.尤其是如今前端开发中大部分的代码都经过编译,打包等工程化转换 ...
- 让 webpack 加载 Source Map
在浏览器中运行的 JavaScript 代码都是编译器输出的代码,这些代码的可读性很差.如果在开发过程中遇到一个不知道原因的 Bug,则你可能需要通过断点调试去找出问题. 在编译器输出的代码上进行断点 ...
- webpack学习_使用source map
追踪错误和警告,JS提供sourcemap功能,将编译后的代码映射回原始代码(简单来说就是即使打包后,也可以检测知道该错误来自哪个JS文件).如果一个错误来自与b.js,那么source map回明确 ...
- Source Map调试压缩后代码
在前端开发过程中,无论是样式还是脚本,运行时的文件可能是压缩后的,那这个时候调试起来就很麻烦. 这个时候,可以使用Source Map文件来优化调试,Source Map是一个信息文件,里面储存着原代 ...
- [AngualrJS + Webpack] Production Source Maps
When you uglify your Angular code with Webpack's uglify plugin, debugging your application can be a ...
- Source Map入门教程
部署前端之前,开发者通常会对代码进行打包压缩,这样可以减少代码大小,从而有效提高访问速度.然而,压缩代码的报错信息是很难Debug的,因为它的行号和列号已经失真.这时就需要Source Map来还原真 ...
- Javascript 如何生成Less和Js的Source map
为什么有Source map CSS和JS脚本正变得越来越复杂,为了解决网络瓶颈,大部分源代码都需要经过编译.合并.压缩才能运用到实际环境中.为了减少网络资源占用,源码一般都会经过以下方式处理: 使用 ...
随机推荐
- Udp实现省略编码
class My_Socket(socket.socket): def __init__(self, encoding='utf-8'): self.encoding = encoding super ...
- Educational Codeforces Round 20 B
Description You are given the array of integer numbers a0, a1, ..., an - 1. For each element find th ...
- AIX系统常用命令
netstat -an | grep 9090 可以看到该端口正被监听,但却不知道是哪个进程占用了该端口 1. netstat -Aan|grep 端口号找到该端口连接对应的PCB/ADDR和连接的 ...
- solr 统计中stats的一般用法
//统计数据 根据查询条件 public String getStats(String ipName) { JSONObject obj; JSONArray pageArray = new JSON ...
- [转].NET MVC 分页以及增删查改
本文转自:http://blog.csdn.net/sust2012/article/details/30761867 . 数据库操作,DAL 层: using System; using Syste ...
- Git-merge & rebase(变基)
在 Git 中整合来自不同分支的修改主要有两种方法:merge 以及 rebase. merge: merge有两种方法,fast-forward(快速合并)和three-way merge(三方合并 ...
- php 生成饼状图，折线图，条形图 通用类
生成饼状图,折线图,条形图通用的php类,这里使用的是百度 Echart. Echart 官方网站 http://echarts.baidu.com/ <?php class Echarts ...
- 第17周翻译：SQL Server中的事务日志管理的阶梯:第5级:在完全恢复模式下管理日志
来源:http://www.sqlservercentral.com/articles/Stairway+Series/73785/ 作者:Tony Davis, 2012/01/27 翻译:刘琼滨. ...
- 洛谷 P1216 [USACO1.5]数字三角形 Number Triangles（水题日常）
题目描述 观察下面的数字金字塔. 写一个程序来查找从最高点到底部任意处结束的路径,使路径经过数字的和最大.每一步可以走到左下方的点也可以到达右下方的点. 7 3 8 8 1 0 2 7 4 4 4 5 ...
- 一个PHP开发APP接口的视频教程
感觉php做接口方面的教程很少,无意中搜到了这个视频教程,希望能给一些人带来帮助http://www.imooc.com/learn/163