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.autocomplete修改实现键盘上下键自动填充示例
Nov 19 Javascript
一个简单的jquery进度条示例
Apr 28 Javascript
JavaScript制作windows经典扫雷小游戏
Mar 31 Javascript
JS提交form表单实例分析
Dec 10 Javascript
jquery实现简单的全选和反选功能
Jan 02 Javascript
JS 循环li添加点击事件 (闭包的应用)
Dec 10 Javascript
Javascript中this关键字指向问题的测试与详解
Aug 11 Javascript
ES6入门教程之Array.from()方法
Mar 23 Javascript
vue读取本地的excel文件并显示在网页上方法示例
May 29 Javascript
JavaScript剩余操作符Rest Operator详解
Jul 20 Javascript
vue中使用GraphQL的实例代码
Nov 04 Javascript
Vue父子组件传值的一些坑
Sep 16 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
yii实现CheckBox复选框在同一行显示的方法
2014/12/03 PHP
php metaphone()函数及php localeconv() 函数实例解析
2016/05/15 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
js模拟实现Array的sort方法
2007/12/11 Javascript
Javascript实现仿WebQQ界面的“浮云”兼容 IE7以上版本及FF
2011/04/27 Javascript
Javascript中valueOf与toString区别浅析
2013/03/19 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
2013/04/22 Javascript
JavaScript学习笔记之内置对象
2015/01/22 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
2015/10/23 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
2016/07/14 Javascript
jquery实现下拉框多选方法介绍
2017/01/03 Javascript
学习使用jQuery表单验证插件和日历插件
2017/02/13 Javascript
VUE2.0中Jsonp的使用方法
2018/05/22 Javascript
JS实现获取word文档内容并输出显示到html页面示例
2018/06/23 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
2019/01/15 Javascript
es6数值的扩展方法
2019/03/11 Javascript
怎样使你的 JavaScript 代码简单易读(推荐)
2019/04/16 Javascript
node.js使用yargs处理命令行参数操作示例
2020/02/11 Javascript
JS实现密码框效果
2020/09/10 Javascript
整理Python最基本的操作字典的方法
2015/04/24 Python
python虚拟环境virtualenv的安装与使用
2017/09/21 Python
500行Python代码打造刷脸考勤系统
2019/06/03 Python
Python input函数使用实例解析
2019/11/22 Python
Python脚本导出为exe程序的方法
2020/03/25 Python
python自动化发送邮件实例讲解
2021/01/04 Python
css3实现input输入框颜色渐变发光效果代码
2014/04/02 HTML / CSS
做一个能自适应高度的textarea的示例代码
2019/09/06 HTML / CSS
Lands’ End官网:经典的美国生活方式品牌
2016/08/14 全球购物
美国领先的在线邮轮旅游公司:CruiseDirect
2018/06/07 全球购物
Trina Turk官网:美国时装和泳装品牌
2018/06/10 全球购物
美国在线乐器和设备商店:Musician’s Friend
2018/07/06 全球购物
NFL加拿大官方网上商店:NHLShop.ca
2019/03/12 全球购物
俄罗斯最大的在线手表商店:Bestwatch.ru
2020/01/11 全球购物
2014县政府领导班子对照检查材料思想汇报
2014/09/25 职场文书
工程技术负责人岗位职责
2015/04/13 职场文书
商场广播稿范文
2015/08/19 职场文书