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 相关文章推荐
JavaScript 动态将数字金额转化为中文大写金额
May 14 Javascript
基于jQuery架构javascript基础体系
Jan 01 Javascript
javascript中直接引用Microsoft的COM生成Word
Jan 20 Javascript
Bootstrap 组件之按钮(二)
May 11 Javascript
jQuery实现根据生日计算年龄 星座 生肖
Nov 23 Javascript
jQuery排序插件tableSorter使用方法
Feb 10 Javascript
vue-resource 拦截器使用详解
Feb 21 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
Mar 16 Javascript
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
浅析vue 函数配置项watch及函数 $watch 源码分享
Nov 22 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
Sep 11 Javascript
浅谈JavaScript 声明提升
Sep 14 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
缅甸的咖啡简史
2021/03/04 咖啡文化
php文件缓存类用法实例分析
2015/04/22 PHP
PHP 二维关联数组根据其中一个字段排序(推荐)
2017/04/04 PHP
thinkPHP5框架闭包函数与子查询传参用法示例
2018/08/02 PHP
修改file按钮的默认样式实现代码
2013/04/23 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
jQuery 中$(this).index与$.each的使用指南
2014/11/20 Javascript
js代码验证手机号码和电话号码是否合法
2015/07/30 Javascript
JavaScript函数柯里化详解
2016/04/29 Javascript
jQuery弹出遮罩层效果完整示例
2016/09/13 Javascript
jQuery is not defined 错误原因与解决方法小结
2017/03/19 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
2018/08/31 Javascript
elementUI多选框反选的实现代码
2019/04/03 Javascript
详解jQuery设置内容和属性
2019/04/11 jQuery
js中的深浅拷贝问题简析
2019/05/10 Javascript
vue-router之实现导航切换过渡动画效果
2019/10/31 Javascript
vue 实现 rem 布局或vw 布局的方法
2019/11/13 Javascript
bootstrap实现嵌套模态框的实例代码
2020/01/10 Javascript
[41:52]2018DOTA2亚洲邀请赛3月29日 小组赛A组 TNC VS OpTic
2018/03/30 DOTA
Python使用SocketServer模块编写基本服务器程序的教程
2016/07/12 Python
详解Python 序列化Serialize 和 反序列化Deserialize
2017/08/20 Python
对Python3 pyc 文件的使用详解
2019/02/16 Python
python爬取微信公众号文章的方法
2019/02/26 Python
Django后台admin的使用详解
2019/07/08 Python
matplotlib相关系统目录获取方式小结
2021/02/03 Python
家庭户外服装:Hawkshead
2017/11/02 全球购物
eBay奥地利站:eBay.at
2019/07/24 全球购物
Richards网上商店:当代时尚,遍布巴西
2019/11/03 全球购物
python re模块和正则表达式
2021/03/24 Python
数控技术应用个人求职信范文
2014/02/03 职场文书
教代会开幕词
2015/01/28 职场文书
2015年前台接待工作总结
2015/05/04 职场文书
人生哲理妙语30条:淡写流年,笑过人生
2019/09/04 职场文书
Python-OpenCV实现图像缺陷检测的实例
2021/06/11 Python
《战锤40K:暗潮》跳票至9月 公布新宣传片
2022/04/03 其他游戏
python数字图像处理:图像简单滤波
2022/06/28 Python