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 表单的友好用户体现
Jan 07 Javascript
最简单的jQuery程序 入门者学习
Jul 09 Javascript
JQuery 解析多维的Json数据格式
Nov 02 Javascript
jquery关于图形报表的运用实现代码
Jan 06 Javascript
ie下动态加态js文件的方法
Sep 13 Javascript
js 处理数组重复元素示例代码
Dec 27 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
Sep 17 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
Jul 08 Javascript
vue element-ui table表格滚动加载方法
Mar 02 Javascript
微信小程序-API接口安全详解
Jul 16 Javascript
小程序Request的另类用法详解
Aug 09 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
Sep 26 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
PHP5.3.1 不再支持ISAPI
2010/01/08 PHP
windows环境下使用Composer安装ThinkPHP5
2018/05/18 PHP
JavaScript去除空格的几种方法
2006/10/03 Javascript
Jquery提交表单 Form.js官方插件介绍
2012/03/01 Javascript
jquery选择器、属性设置用法经验总结
2013/09/08 Javascript
JQuery实现倒计时按钮具体方法
2013/11/14 Javascript
jquery通过a标签删除table中的一行的代码
2013/12/02 Javascript
利用js动态添加删除table行的示例代码
2013/12/16 Javascript
jQuery获得指定元素坐标的方法
2015/04/14 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
2015/12/08 Javascript
jQuery soColorPacker 网页拾色器
2016/06/22 Javascript
JS实现仿PS的调色板效果完整实例
2016/12/21 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
2018/09/21 Javascript
深入理解NodeJS 多进程和集群
2018/10/17 NodeJs
nodejs检测因特网是否断开的解决方案
2019/04/17 NodeJs
用js简单提供增删改查接口
2019/05/12 Javascript
jQuery Raty星级评分插件使用方法实例分析
2019/11/25 jQuery
js实现简单放大镜效果
2020/03/07 Javascript
vue实现把接口单独存放在一个文件方式
2020/08/13 Javascript
[01:50]2014DOTA2西雅图邀请赛 专访欢乐周宝龙
2014/07/08 DOTA
[04:22]DSPL第二期精彩集锦:残血反杀!
2014/12/10 DOTA
Python工程师面试必备25条知识点
2018/01/17 Python
python实现贪吃蛇游戏
2020/03/21 Python
django 取消csrf限制的实例
2020/03/13 Python
python实现扫雷游戏的示例
2020/10/20 Python
CSS3 2D模拟实现摩天轮旋转效果
2016/11/16 HTML / CSS
详解CSS3:overflow属性
2020/11/17 HTML / CSS
挑战杯创业计划书的写作指南
2014/01/07 职场文书
数控专业大学毕业生职业规划范文
2014/02/06 职场文书
商场促销活动方案
2014/02/08 职场文书
参赛口号
2014/06/16 职场文书
大学生自我评价范文
2015/03/03 职场文书
525心理健康活动总结
2015/05/08 职场文书
关于观后感的作文
2015/06/18 职场文书
退休欢送会致辞
2015/07/31 职场文书
JS实现简单的九宫格抽奖
2022/06/28 Javascript