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的弹出消息插件 DivAlert之旅(一)
Apr 01 Javascript
jquery表单验证使用插件formValidator
Nov 10 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
Apr 14 Javascript
javascript设置和获取cookie的方法实例详解
Jan 05 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
Nov 18 Javascript
JS常用加密编码与算法实例总结
Dec 22 Javascript
JavaScript获取当前时间向前推三个月的方法示例
Feb 04 Javascript
jQuery实现菜单的显示和隐藏功能示例
Jul 24 jQuery
移动端滑动切换组件封装 vue-swiper-router实例详解
Nov 25 Javascript
如何在微信小程序中实现Mixins方案
Jun 20 Javascript
JS async 函数的含义和用法实例总结
Apr 08 Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
Nov 04 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实现的仿阿里巴巴实现同类产品翻页
2009/12/11 PHP
在PHP中使用curl_init函数的说明
2010/11/02 PHP
支持中文和其他编码的php截取字符串函数分享(截取中文字符串)
2014/03/13 PHP
PHP的伪随机数与真随机数详解
2015/05/27 PHP
php中json_encode不兼容JSON_UNESCAPED_UNICODE的解决方案
2016/05/31 PHP
PHP随机数函数rand()与mt_rand()的讲解
2019/03/25 PHP
ThinkPHP 5.x远程命令执行漏洞复现
2019/09/23 PHP
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
2014/06/07 Javascript
javascript异步处理工作机制详解
2015/04/13 Javascript
jquery事件的ready()方法使用详解
2015/11/11 Javascript
基于node实现websocket协议
2016/04/25 Javascript
基于JS设计12306登录页面
2016/12/28 Javascript
详解如何优雅地在React项目中使用Redux
2017/12/28 Javascript
JS获取input[file]的值并显示在页面的实现方法
2018/03/09 Javascript
微信小程序实现左滑修改、删除功能
2020/10/19 Javascript
React 使用Hooks简化受控组件的状态绑定
2019/03/18 Javascript
浅谈react-router@4.0 使用方法和源码分析
2019/06/04 Javascript
解决layui-open关闭自身窗口的问题
2019/09/10 Javascript
layer弹出层倒计时关闭的实现方法
2019/09/27 Javascript
python实现猜数字游戏(无重复数字)示例分享
2014/03/29 Python
对Tensorflow中权值和feature map的可视化详解
2018/06/14 Python
pytorch如何冻结某层参数的实现
2020/01/10 Python
浅析pip安装第三方库及pycharm中导入第三方库的问题
2020/03/10 Python
Python爬虫爬取百度搜索内容代码实例
2020/06/05 Python
Pytorch框架实现mnist手写库识别(与tensorflow对比)
2020/07/20 Python
python语言time库和datetime库基本使用详解
2020/12/25 Python
HTML5 Canvas的常用线条属性值总结
2016/03/17 HTML / CSS
以实惠的价格提供高品质的时尚:Newchic
2018/01/18 全球购物
瑞典快乐袜子:Happy Socks
2018/02/16 全球购物
世界上最受欢迎的钓鱼诱饵:Rapala
2019/05/02 全球购物
酒店经理职责
2014/01/30 职场文书
企业办公室岗位职责
2014/03/12 职场文书
元旦晚会开场白
2015/05/29 职场文书
Django实现在线无水印抖音视频下载(附源码及地址)
2021/05/06 Python
使用javascript解析二维码的三种方式
2021/11/11 Javascript
Python使用Web框架Flask开发项目
2022/06/01 Python