WebPack_钢铁雄心4toolpack

WebPack_钢铁雄心4toolpack关于Devtool该选项控制是否以及如何生成源映射。官网上给出的可选值有:其中一些值适合开发,一些用于生产。对于开发,您通常需要快速的SourceMaps,以bundle的大小为代价,但是对于生产,您需要独立的SourceMaps,这是精确的,并且支持最小化。选择一种源映射样式,以增强调试过程。这些值可以显著地影响构建和重建速度。而不是使用devtool选项还可以使用Sourc…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE稳定放心使用

关于Devtool

该选项控制是否以及如何生成源映射。官网上给出的可选值有:

WebPack_钢铁雄心4toolpack

其中一些值适合开发,一些用于生产。对于开发,您通常需要快速的Source Maps,以bundle的大小为代价,但是对于生产,您需要独立的Source Maps,这是精确的,并且支持最小化。

选择一种源映射样式,以增强调试过程。这些值可以显著地影响构建和重建速度。而不是使用devtool选项还可以使用SourceMapDevToolPlugin / EvalSourceMapDevToolPlugin直接有了更多的选择。不要同时使用devtool选项和插件。devtool选项在内部添加了插件,所以你最终会得到应用两次的插件。

实例详解

1.新建print.js

export default function printMe() {
  console.log('武昌鱼@222');
}

2.新建index.js

mport 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_钢铁雄心4toolpack

eval

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

Each module is executed withevaland//@ sourceURL.

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

WebPack_钢铁雄心4toolpack

source-map

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

WebPack_钢铁雄心4toolpack

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_钢铁雄心4toolpack

eval-source-map

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

WebPack_钢铁雄心4toolpack

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_钢铁雄心4toolpack

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。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/185506.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • java中jbpm工作流_java流程控制

    java中jbpm工作流_java流程控制1.        工作流       工作流是一项分离业务操作和系统流程的技术。工作流由实体(Entity)、参与者(Participant)、流程定义(FlowDefinition)、工作流引擎(Engine) 四部分组成。l  实体是工作流的主体,是需要随着工作流一起流动的物件(Object)。例如,在一个采购申请批准流程中,实体就是采购申请单;在公文审批流程中,实体就是公文。

  • 机器学习笔记 – 自动编码器autoencoder

    机器学习笔记 – 自动编码器autoencoder自编码器是开发无监督学习模型的主要方式之一。但什么是自动编码器?简而言之,自动编码器通过接收数据、压缩和编码数据,然后从编码表示中重构数据来进行操作。对模型进行训练,直到损失最小化并且尽可能接近地再现数据。通过这个过程,自动编码器可以学习数据的重要特征。自动编码器是由多个层组成的神经网络。自动编码器的定义方面是输入层包含与输出层一样多的信息。输入层和输出层具有完全相同数量的单元的原因是自动编码器旨在复制输入数据。然后分析数据并以无监督方式重建数据后输出数据副本。

  • qtum量子链官网_币宽BitQuant量化交易系统

    qtum量子链官网_币宽BitQuant量化交易系统全球专业交易所Bithumb Global上线Qtum量子链,开启QTUM交易大赛

  • 海龟绘图简易教程|Turtle for Python

    海龟绘图简易教程|Turtle for Pythonturtle是python内置的一个比较有趣味的模块,俗称海龟绘图,它是基于tkinter模块打造,提供一些简单的绘图工具,海龟作图最初源自20世纪60年代的Logo编程语言,之后一些很酷的Python程序员构建了turtle库,让其他程序员只需要importturtle,就可以在Python中使用海龟作图。原文链接|海龟绘图简易教程1….

  • 8000401a错误解决方式(Excel)

    8000401a错误解决方式(Excel)前一阵子做开发须要用到Excel和Word编程,本人用的是Vista系统,开发环境是VS2005和Office2007,測试无不论什么问题,但是到部署的时候出现了一些令人非常头痛的问题,老是会出现比如:检索COM类工厂中CLSID为{000209FF-0000-0000-C000-000000000046}的组件时失败,原因是出现下面错误:8000401a。的错误,在网上查…

  • 服务器中”系统平均负载 Load average“含义学习

    服务器中”系统平均负载 Load average“含义学习文章目录一、什么是系统平均负载二、衡量系统性能三、行车过桥(引用)四、自我总结一、什么是系统平均负载  uptime、w、top等命令都会有系统负载loadaverage的输出,系统平均负载被定义为在特定时间间隔内运行队列中的平均进程数,包括可运行状态和不可中断状态的平均进程数,也就是活跃进程数。它和cpu使用率没有直接的关系二、衡量系统性能  如果系统平均负载的数值除以CPU的数目高于…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号