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 相关文章推荐
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
Oct 24 Javascript
js截取字符串的两种方法及区别详解
Nov 05 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
Apr 12 Javascript
js 获取input点选按钮的值的方法
Apr 14 Javascript
javascript时间函数大全
Jun 30 Javascript
node.js中的fs.lchmod方法使用说明
Dec 16 Javascript
js不间断滚动的简单实现
Jun 03 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
Mar 30 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
Jul 27 Javascript
在vue+element ui框架里实现lodash的debounce防抖
Nov 13 Javascript
浅谈关于vue中scss公用的解决方案
Dec 02 Javascript
解决Vue项目中tff报错的问题
Oct 21 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
如何在WIN2K下安装PHP4.04
2006/10/09 PHP
CI映射(加载)数据到view层的方法
2016/03/28 PHP
PHP中explode函数和split函数的区别小结
2016/08/24 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式二图文详解
2019/04/09 PHP
PHP面向对象程序设计之对象克隆clone和魔术方法__clone()用法分析
2019/06/12 PHP
php使用event扩展的io复用测试的示例
2020/10/20 PHP
JQuery里面的几种选择器 查找满足条件的元素$("#控件ID")
2011/08/23 Javascript
js substr、substring和slice使用说明小记
2011/09/15 Javascript
js判断变量是否未定义的代码
2020/03/28 Javascript
jquery图片切换实例分析
2015/04/15 Javascript
js实现模拟银行卡账号输入显示效果
2015/11/18 Javascript
详解JavaScript表单验证(E-mail 验证)
2016/03/31 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
2016/06/15 Javascript
jQuery中元素选择器(element)简单用法示例
2018/05/14 jQuery
Node.js控制台彩色输出的方法与原理实例详解
2019/12/01 Javascript
vue各种事件监听实例(小结)
2020/06/24 Javascript
Vue父子之间值传递的实例教程
2020/07/02 Javascript
Python 开发Activex组件方法
2009/11/08 Python
Python深拷贝与浅拷贝用法实例分析
2019/05/05 Python
在python中用url_for构造URL的方法
2019/07/25 Python
python实现各种插值法(数值分析)
2019/07/30 Python
python入门教程之基本算术运算符
2020/11/13 Python
利用python制作拼图小游戏的全过程
2020/12/04 Python
鼠标滚轮事件和Mac触控板双指事件
2019/12/23 HTML / CSS
美国学校校服,儿童和婴儿服装:Cookie’s Kids
2016/10/14 全球购物
乡镇干部个人整改措施思想汇报
2014/10/10 职场文书
出差报告怎么写
2014/11/06 职场文书
数学考试作弊检讨书300字
2015/02/16 职场文书
2015年化工厂工作总结
2015/05/04 职场文书
离婚案件被告代理词
2015/05/23 职场文书
2015年车间管理工作总结
2015/07/23 职场文书
学生病假条范文
2015/08/17 职场文书
PHP 对接美团大众点评团购券(门票)的开发步骤
2021/04/03 PHP
pytorch中的numel函数用法说明
2021/05/13 Python
Python 高级库15 个让新手爱不释手(推荐)
2021/05/15 Python
JVM之方法返回地址详解
2022/02/28 Java/Android