webpackdevtool配置简单对比简书_钢铁雄心4toolpackMOD

webpackdevtool配置简单对比简书_钢铁雄心4toolpackMOD作用:webpack会将js代码进行压缩打包,loader也会处理相应代码,打包后代码很难进行查看,这也使得开发人员调试时很难找到对应代码位置。此时可采用devtool,通过资源地图的方式,给出打包后代码到原始代码的映射,方便开发人员调试。要点:webpack官方给出了多种模式,模式间主要区别以及应用场景已经给出,下面是主要参考参数参数名参数描述参数值devtool可以使用的devtool根据基础模式可自行组合,基础模式有:(eval、cheap、module、inli.

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

Jetbrains全系列IDE稳定放心使用

作用:

webpack会将js代码进行压缩打包,loader也会处理相应代码,打包后代码很难进行查看,这也使得开发人员调试时很难找到对应代码位置。此时可采用devtool,通过资源地图的方式,给出打包后代码到原始代码的映射,方便开发人员调试。

要点:

webpack官方给出了多种模式,模式间主要区别以及应用场景已经给出,下面是主要参考参数

参数名 参数描述 参数值
devtool 可以使用的devtool 根据基础模式可自行组合,基础模式有:(eval、cheap、module、inline、hidden、nosources)
performance 构建性能 性能主要分为2种:build:构建速度,rebuild:重构速度
production 是否建议生产环境使用 yes为官方建议生产环境使用
quality devtool特性 特性主要有5种:bundle模块不分离;generated直接生成资源地图;transformed转化后资源地图;original:原始代码;lines:只有行信息
comment devtool描述 见官方文档

示例:

module.exports = { 
   
    /** * devtool目前有20多种,都是通过最基础的模式组合而成 * 基础模式有: * (eval、cheap、module、inline、hidden、nosources) +'-source-map' */

    /** * eval会执行打包后的字符串 * 字符串中包含了代码源文件位置的注释,同时告诉浏览器资源地图位置sourceURL * 然后将eval中内容放入资源地图中 */
    // devtool: 'eval'

    /** * 打包后代码无eval包裹 * 资源地图将单独存放于*.map文件下,最终通过sourceMappingURL引入 */
    // devtool: 'source-map'

    /** * 三者几乎一致,都是将资源地图内联到打包文件中 * 通过sourceMappingURL将资源文件做base64处理后引用 * 所以这里又称作DataURL * * cheap: 不包含列信息,指浏览器点击跳转资源地图时不会跳到对应列,只会到行的开头 * module: 指资源地图不经过loader处理,看到的就是原始书写的代码 */
    // devtool: 'eval-source-map',
    // devtool: 'eval-cheap-source-map',
    devtool: 'eval-cheap-module-source-map',

    module: { 
   
        rules: [
            { 
   
                test: /\.js$/,
                use: { 
   
                    loader: 'babel-loader',
                    options: { 
   
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    }
}

官方文档:https://webpack.docschina.org/configuration/devtool/

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

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

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

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

(0)


相关推荐

  • 怎么把eclipse改成英文(java汉化包)

    eclipse汉化教程(官方汉化包,傻瓜式操作)首先到eclipseIDE中,点击‘Help’>‘Installnewsoftware…’在弹出的Install窗口中点击Add按钮Name任意填Location填https://download.eclipse.org/technology/babel/update-site/R0.18.3/2021-03/这里解释一下这个Location的出处,是在Eclipse官方的babel语言包project网页上找的,可能不是最

  • DFS(深度优先搜索算法)「建议收藏」

    DFS(深度优先搜索算法)「建议收藏」基本概念深度优先搜索算法(DepthFirstSearch,简称DFS):一种用于遍历或搜索树或图的算法。沿着树的深度遍历树的节点,尽可能深的搜索树的分支。当节点v的所在边都己被探寻过或者在搜寻时结点不满足条件,搜索将回溯到发现节点v的那条边的起始节点。整个进程反复进行直到所有节点都被访问为止。属于盲目搜索,最糟糕的情况算法时间复杂度为O(!n)。算法思想回溯法(探索与回溯法…

  • HTTP与HTTPS的区别,详细介绍[通俗易懂]

    HTTP与HTTPS的区别,详细介绍[通俗易懂]目录HTTP与HTTPS介绍HTTPS和HTTP的主要区别客户端在使用HTTPS方式与Web服务器通信时的步骤CA证书的申请及其使用过程HTTPS的缺点SSL与TLS的区别?SSL/TLS历史SSL/TLS协议的基本过程HTTPS涉及的计算环节如何优化HTTPS的速度HTTP与HTTPS介绍超文本传输协议HTTP协议被用于在We…

  • phpstorm IDEA 双击Shift键会弹出 SearchEverywhere 对话框,如何取消这个功能

    phpstorm IDEA 双击Shift键会弹出 SearchEverywhere 对话框,如何取消这个功能

  • sublime phpcs

    sublime phpcs

  • mysql备份后缀是什么_mysql备份还原

    mysql备份后缀是什么_mysql备份还原一、备份常用操作基本命令1、备份命令mysqldump格式格式:mysqldump-h主机名-P端口-u用户名-p密码–database数据库名>文件名.sql2、备份MySQL数据库为带删除表的格式备份MySQL数据库为带删除表的格式,能够让该备份覆盖已有数据库而不需要手动删除原有数据库。mysqldump–add-drop-table-uusername-p…

发表回复

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

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