webpack之devtool详解

 更新时间:2018年02月10日 08:34:19   作者:武昌鱼艾特222  
这篇文章主要介绍了webpack之devtool详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

关于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,生成代码如下所示:

eval

eval 模式会把每个 module 封装到 eval 里包裹起来执行,并且会在末尾追加注释。

Each module is executed withevaland//@ sourceURL.

打包之后点击打印按钮,console显示print.js:3,生成代码如下所示:

source-map

打包之后你会发现你的 output 目录下多了一个 index.js.map 文件,此文件记录了sourceMap 行列信息如何映射源代码的信息。点击打印按钮,console显示print.js:3,生成代码如下所示:

main.js

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,生成代码如下所示:

main.js

eval-source-map

和 eval 类似,但是把注释里的 sourceMap 都转为了 DataURL。console显示print.js?dc38:2,生成代码如下所示:

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 属性里面少了列信息,如下所示:

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常用的方法整理

    JAVASCRIPT是AJAX技术中不可或缺的一部分,所以想学好AJAX以及现在流行的AJAX框架,学好JAVASCRIPT是最重要的。这章我给大家整理了一些JAVASCRIPT的基础知识、常用代码和事件汇总。
    2015-08-08
  • ES6入门教程之let和const命令详解

    ES6入门教程之let和const命令详解

    最近做项目的过程中,使用到了ES6,因为之前很少接触,所以使用起来还不够熟悉。通过学习网上的教程后觉着有必要整理下遇到的let和const命令,所以这篇文章主要给大家介绍了ES6中let和const命令的相关资料,需要的朋友可以参考下。
    2017-05-05
  • 最新热门脚本Autojs源码分享

    最新热门脚本Autojs源码分享

    AutoJS 是基于一个标准字典库的文本输入自动完成 JavaScript 库。Auto.js 是使用纯 JS 实现的,没有任务外部依赖,大小仅仅 6kb,本文给大家分享最新热门脚本Autojs源码,感兴趣的朋友一起看看吧
    2021-05-05
  • toString()一个会自动调用的方法

    toString()一个会自动调用的方法

    toString方法的作用是不用多说的了,这个JavaScript内置方法还有一个特性是:在执行一些特殊方法的时候,比如alert或innerHTML等方法,它将由脚本解析器自动调用。
    2010-02-02
  • 关于JS中的全等和不全等、等于和不等于问题

    关于JS中的全等和不全等、等于和不等于问题

    等号和非等号的同类运算符是全等号和非全等号。这两个运算符所做的与等号和非等号相同,只是它们在检查相等性前,不执行类型转换。接下来通过本文给大家介绍JS中的全等和不全等、等于和不等于,一起看看吧
    2021-09-09
  • js不能跳转到上一页面的问题解决方法

    js不能跳转到上一页面的问题解决方法

    用JS:history.go(-1)就可以回到A页面,如果使用Click,Change事件等激发了页面的回传,此时用history.go(-1)就回不到A页面了,遇到此问题的朋友们可以祥看本文
    2013-03-03
  • 如何在JavaScript中实现私有属性的写类方式(二)

    如何在JavaScript中实现私有属性的写类方式(二)

    这篇文章主要介绍了如何在JavaScript中实现私有属性的写类方式。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • 微信小程序开发探究

    微信小程序开发探究

    这篇文章主要介绍了微信小程序开发探究,非常具有实用价值,需要的朋友可以参考下。
    2016-12-12
  • ionic实现带字的toggle滑动组件

    ionic实现带字的toggle滑动组件

    这篇文章主要为大家详细介绍了ionic实现带字的toggle滑动组件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • js实现身份证号码验证的简单实例

    js实现身份证号码验证的简单实例

    本篇文章主要是对js实现身份证号码验证的简单实例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02

最新评论