webpack之devtool详解


Posted in Javascript onFebruary 10, 2018

关于Devtool

该选项控制是否以及如何生成源映射。官网上给出的可选值有:

webpack之devtool详解

其中一些值适合开发,一些用于生产。对于开发,您通常需要快速的Source Maps,以bundle的大小为代价,但是对于生产,您需要独立的Source Maps,这是精确的,并且支持最小化。

选择一种源映射样式,以增强调试过程。这些值可以显著地影响构建和重建速度。而不是使用devtool选项还可以使用SourceMapDevToolPlugin / EvalSourceMapDevToolPlugin直接有了更多的选择。不要同时使用devtool选项和插件。devtool选项在内部添加了插件,所以你最终会得到应用两次的插件。

实例详解

1.新建print.js

export default function printMe() {
 console.log('武昌鱼@222');
}

2.新建index.js

import printMe from './print.js';
function component() {
 var element = document.createElement('div');
 var btn = document.createElement('button');
 btn.innerHTML = 'Click 1me and check 1the console!';
 btn.onclick = printMe;
 element.appendChild(btn);
 return element;
}
document.body.appendChild(component());

3.新建webpack.config.js

const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
 entry: './src/index.js',
 output: {
  filename: '[name].js',
  path: path.resolve(__dirname, 'dist')
 },
 plugins: [
  new CleanWebpackPlugin(['dist']),
  new HtmlWebpackPlugin({
   title: ' webpack之devtool'
  })
 ]
};

4.使用不同的devtool选项

 none

打包后点击打印按钮,console显示main.js:96,生成代码如下所示:

webpack之devtool详解webpack之devtool详解

eval

eval 模式会把每个 module 封装到 eval 里包裹起来执行,并且会在末尾追加注释。

Each module is executed withevaland//@ sourceURL.

打包之后点击打印按钮,console显示print.js:3,生成代码如下所示:

webpack之devtool详解webpack之devtool详解

source-map

打包之后你会发现你的 output 目录下多了一个 index.js.map 文件,此文件记录了sourceMap 行列信息如何映射源代码的信息。点击打印按钮,console显示print.js:3,生成代码如下所示:

webpack之devtool详解

main.js

webpack之devtool详解

main.js.map

hidden-source-map

打包后main.js与 source-map 选项相比少了末尾注释,但 output 目录下的 index.js.map 没有少。点击打印按钮,console显示main.js:96。

inline-source-map

打包后可以看到末尾的注释 sourceMap 作为 DataURL 的形式被内嵌进了 bundle中,由于 sourceMap 的所有信息都被加到了bundle中,整个 bundle 文件变得硕大无比。点击打印按钮,console显示print.js:3,生成代码如下所示:

webpack之devtool详解

main.js

eval-source-map

和 eval 类似,但是把注释里的 sourceMap 都转为了 DataURL。console显示print.js?dc38:2,生成代码如下所示:

webpack之devtool详解

main.js

cheap-source-map

和 source-map 生成结果差不多。output 目录下的index.js内容一样。但是 cheap-source-map 生成的 index.js.map 的内容却比 source-map 生成的 index.js.map 要少很多代码,我们对比一下上文 source-map 生成的 index.js.map 的结果,发现 source 属性里面少了列信息,如下所示:

webpack之devtool详解

main.js.map

cheap-module-source-map

在一个单独的文件中生成一个不带列映射的map,不带列映射提高了打包速度,但是也使得浏览器开发者工具只能对应到具体的行,不能对应到具体的列(符号),会对调试造成不便;

总结

 开发环境推荐使用:

1.eval :每个模块使用eval()和//@ sourceURL执行。这是非常快。主要缺点是,它没有正确显示行号,因为它被映射到转换代码而不是原始代码(没有来自加载器的源映射)。

2.eval-source-map:每个模块使用eval()执行,而SourceMap作为DataUrl添加到eval()中。最初它是缓慢的,但是它提供快速的重建速度和产生真实的文件。行号被正确映射,因为它被映射到原始代码。它产生了最优质的开发资源。

3.cheap-eval-source-map:与eval-source-map类似,每个模块都使用eval()执行。它没有列映射,它只映射行号。它忽略了来自加载器的源代码,并且只显示与eval devtool相似的经过转换的代码。

4.cheap-module-eval-source-map:类似于cheap-eval-source-map,在本例中,来自加载器的源映射被处理以获得更好的结果。然而,加载器源映射被简化为每一行的单个映射。

生产环境推荐使用:

1.(none) :(省略devtool选项)-不触发SourceMap。这是一个很好的选择。

2.source-map:一个完整的SourceMap是作为一个单独的文件。它为bundle 添加了引用注释,因此开发工具知道在哪里找到它。

3.hidden-source-map:与source-map相同,但不向bundle 添加引用注释。如果您只希望SourceMaps从错误报告中映射错误堆栈跟踪,但不想为浏览器开发工具暴露您的SourceMap,可以使用此选项。

4.nosources-source-map:一个SourceMap是在没有源代码的情况下创建的。它可以用于在客户机上映射堆栈跟踪,而不暴露所有源代码。您可以将源映射文件部署到webserver。

Javascript 相关文章推荐
Firefox getBoxObjectFor getBoundingClientRect联系
Oct 26 Javascript
js 火狐下取本地路径实现思路
Apr 02 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
Oct 17 Javascript
JS遍历数组及打印数组实例分析
Jan 21 Javascript
三种Node.js写文件的方式
Mar 08 Javascript
javascript特殊文本输入框网页特效
Sep 13 Javascript
详解在Angularjs中ui-sref和$state.go如何传递参数
Apr 24 Javascript
jQuery封装animate.css的实例
Jan 04 jQuery
angular第三方包开发整理(小结)
Apr 19 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
Oct 16 Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
Sep 21 Javascript
JavaScript实现消消乐的源代码
Jan 12 Javascript
React组件refs的使用详解
Feb 09 #Javascript
详解vue-cli项目中的proxyTable跨域问题小结
Feb 09 #Javascript
使用express搭建一个简单的查询服务器的方法
Feb 09 #Javascript
js自定义trim函数实现删除两端空格功能
Feb 09 #Javascript
JavaScript运行原理分析
Feb 09 #Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
Feb 09 #Javascript
详解如何在项目中使用jest测试react native组件
Feb 09 #Javascript
You might like
php 对输入信息的进行安全过滤的函数代码
2012/06/29 PHP
phpmailer中文乱码问题的解决方法
2014/04/22 PHP
PHP冒泡算法详解(递归实现)
2014/11/10 PHP
PHP中实现Bloom Filter算法
2015/03/30 PHP
详解PHP的Yii框架的运行机制及其路由功能
2016/03/17 PHP
深入理解PHP类的自动载入机制
2016/09/16 PHP
Yii2结合Workerman的websocket示例详解
2018/09/10 PHP
javascript数组组合成字符串的脚本
2021/01/06 Javascript
Javascript 面向对象 对象(Object)
2010/05/13 Javascript
JavaScript性能陷阱小结(附实例说明)
2010/12/28 Javascript
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
2012/10/12 Javascript
node.js 使用ejs模板引擎时后缀换成.html
2015/04/22 Javascript
jQuery实现简单的DIV拖动效果
2016/02/19 Javascript
Javascript类型转换的规则实例解析
2016/02/23 Javascript
jQuery插件EasyUI获取当前Tab中iframe窗体对象的方法
2016/08/05 Javascript
vue获取input输入值的问题解决办法
2017/10/17 Javascript
jquery实现侧边栏左右伸缩效果的示例
2017/12/19 jQuery
浅谈Node.js 子进程与应用场景
2018/01/24 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
2019/11/09 Javascript
Python编写登陆接口的方法
2017/07/10 Python
Python+Selenium+PIL+Tesseract自动识别验证码进行一键登录
2017/09/20 Python
python 读写中文json的实例详解
2017/10/29 Python
详解python多线程、锁、event事件机制的简单使用
2018/04/27 Python
python实现Dijkstra算法的最短路径问题
2019/06/21 Python
Python正则表达式匹配数字和小数的方法
2019/07/03 Python
Python上下文管理器用法及实例解析
2019/11/11 Python
Python列表去重复项的N种方法(实例代码)
2020/05/12 Python
pycharm中如何自定义设置通过“ctrl+滚轮”进行放大和缩小实现方法
2020/09/16 Python
python中altair可视化库实例用法
2021/01/26 Python
英国家电直销:Appliances Direct
2016/09/22 全球购物
最耐用行李箱,一箱永流传:Briggs & Riley(全球终身保修)
2017/12/07 全球购物
信息技术教学反思
2014/02/12 职场文书
公司财务流程之主管工作流程
2014/03/03 职场文书
农行心得体会
2014/09/02 职场文书
家属答谢词
2015/01/05 职场文书
银行资信证明
2015/06/17 职场文书