1.å¦ä½å¨WebStorm 2017ä¸è°è¯Vue.js + webpack
2.DevTool开发者工具
3.webpack之devtool详解
4.devtool使用介绍(1)-devtool add
5.配置Webpack Dev Server 实战操作方法步骤
6.webpack的devtool 配置
å¦ä½å¨WebStorm 2017ä¸è°è¯Vue.js + webpack
æ人è§å¾vue项ç®é¾è°è¯ï¼æ¯å 为ç¨äºwebpackãææ代ç æå¨äºä¸èµ·ï¼è¿å äºå¾å¤æ¡æ¶ä»£ç ï¼æ ¹æ¬ä¸ç¥éæä¹ä¸æãæ以vue+webpackè°è¯è¦ä»webpackå ¥æã
1.æ们å ä»ä¸è¬æ åµå¼å§è¯´ã
-sourcemap
webpacké ç½®æä¾äºdevtoolè¿ä¸ªé项ï¼å¦æ设置为 â#source-mapâï¼åå¯ä»¥çæ.mapæ件ï¼å¨chromeæµè§å¨ä¸è°è¯çæ¶åå¯ä»¥æ¾ç¤ºæºä»£ç ã
devtool: '#source-map'
2.ç¶èè¿ä¸ªè®¾ç½®å®é ä¸æ²¡è¿ä¹ç®åãwebpackå®æ¹ç»åºäº7个é 置项ä¾éæ©:
.devtoolä»ç»
è¿éä¸åçé ç½®æäºä¸åçææï¼æ¯å¦æ¯å¦ä¿ç注éãä¿çè¡ä¿¡æ¯çï¼å ·ä½æ¯ä¸æ¡ä»ä¹ææè¿éä¸è¯¦è§£éï¼æå ´è¶£çç«¥éå¯ä»¥åèè¿ç¯æç«
å®æ¹é»è®¤çæ¯ç¨ â#cheap-module-eval-source-mapâ
devtool: '#cheap-module-eval-source-map'
设置好ä¹åï¼å¨vue项ç®è°è¯çæ¶åï¼ä»£ç éé¢æ 注debuggerçæ¶åå°±è½çå°å¯¹åºç代ç äºï¼é常æ¹ä¾¿ã
.debugger
æè ï¼ç´æ¥æ¾å°å¯¹åºçæ件ãå¨chromeç¨ âctrl(command) + pâï¼è¾å ¥æ件åï¼å¯ä»¥æ¾å°å¯¹åºçæºä»£ç ã
command+p
ææç¹ï¼
æç¹
éè¦æ³¨æçæ¯ï¼è¿éæç¹ä¼æå¨ä¸ä¸è¡ãåæ¶ä¸è¡ä»£ç è¿è¡å¨å®çä¸ä¸è¡æç®æ§è¡ã
.-vue-cli
vue家ç项ç®èææ¶ï¼æ¨è使ç¨ãvue-cliè家å¨è¿é
vue-cliå¯ä»¥å¸®æ们èªå¨æ建项ç®ï¼é¦å npmå ¨å±å®è£
npm install -g vue-cli
ç¶åå建ä¸ä¸ªæ°ç项ç®
vue init webpack my-project
ä¸è·¯å车ï¼æå®ã(æ´å¤é 置项请åèä¸é¢ç»åºçvue-clié¾æ¥)
è¿éä»ç½ä¸ä¸è½½äºä¸ä¸ªå¸¦webpackçvue项ç®(è·ä¹åè®°å¾npm installä¸ä¸)
.vue-cli webpack
ä»bulidæ件夹éé¢å°±å¤§æ¦è½çåºï¼
•webpack.dev.conf: å¼å模å¼ç¨
•webpack.prod.conf: ç产模å¼ç¨
å ¶ä¸ï¼å¼å模å¼æä¾äºdevtool为â#cheap-module-eval-source-mapâï¼ç产模å¼æ ¹æ®configæ件夹ä¸çproductionSourceMapåéæ§å¶æ¯å¦ä½¿ç¨ã
è¥ä¸ºtrueï¼ådevtool为â#source-mapâ
å ¶ä»ä½¿ç¨æ¹æ³ä¸è´ãé常æ¹ä¾¿ã
3.线ä¸è°è¯
å¹³æ¶å¼åçæ¶åï¼æ们ç¨webpackççå è½½ï¼å¯ä»¥çå»æè½½è°è¯çæ¥éª¤ï¼é常æ¹ä¾¿ãä½æ¯åå¸åé¨ç½²å°æå¡å¨ä¸ï¼å°±å¤±å»äºè¿ä¸ªæ¬å°ä¼å¿ã
å¦æ使ç¨æè½½æ件æ¹å¼ä¼æ¯è¾éº»ç¦ãç±äºwebpackæåºæ¥çæ件æçæ¬å·è¿äºä¿¡æ¯ï¼èä¸åå¸ä¸ä¸ªå ç代ç éå¯è½éè¦çå¾ ä¸çï¼è¿ä¸ªæ¹æ¡ä¸å®é ãä½æ¯å¦ææè½½çæ¯çå è½½å°ç«¯å£ä¸çæ件çè¯ï¼è¿ä¸ªé®é¢å°±å¾å¥½åäºã
-çå è½½
å¨æ¤ä¹åï¼å æ¥åæä¸ä¸webpackççå è½½åçã
对项ç®æå å¯ä»¥åç°è¿ä¹ä¸ä¸ªæ件ï¼__webpack_hmr
__webpack_hmr
è¿æ¯webpackçå è½½çæå¡å¨æ¨éäºä»¶ï¼eventsourceç±»åï¼åè½åwebsocketæç¹ç±»ä¼¼ã大è´ä½ç¨æ¯å»ºç«ä¸ä¸ªä¸ä¼åæ¢çstreamæµé¾æ¥ï¼æå¡å¨åéæ´æ°æ°æ®åæ¥appendå°æµçæ«ç«¯ï¼å端读åææ°appendçæ°æ®ï¼ç¶åå¨æçæ´æ°é¡µé¢ä¸çä¸è¥¿ã
æ¥ä¸æ¥æ们è§å¯ä¸ä¸ææå°çæ´æ°æ°æ®æåªäºãé便æ´æ°ä¸ä¸ªæ件ï¼è§¦åçå è½½ï¼åæ个å ï¼åç°æ两个.hot-update.jsonåä¸ä¸ª.hot-update.jsæ件
çå è½½æ´æ°æ件
è¿äºå ·ä½åäºäºå¥æä¸ç¥éï¼è¿éå°±ä¸æ·±ç©¶äºãåºè¯¥æ¯æ ¹æ®jsonéé¢çæ°æ®ï¼è¾¾å°ä¸ä¸ªåç¡®æ´æ°çææã
æ以çæ´æ°å ¶å®å°±æ¯çå¬æå¡å¨ä¸çæ°æ®ï¼æä¿®æ¹çè¯æå¡å¨åéæ°æ®è¿æ¥ï¼å端ææ°æ®æ¿æ¥åæ¿æ¢å°é¡µé¢ä¸è¿ä¹ä¸ä¸ªè¿ç¨ã
-AutoResponder
æ¥ä¸æ¥è°è°çº¿ä¸æè½½æµè¯ï¼è¿éæ¨èä¸æ¬¾è½¯ä»¶ï¼fiddler
fiddleræä¸ä¸ªåè½å«åAutoResponderï¼å®å¯ä»¥å°ä¸ä¸ªå°åæåå¦ä¸ä¸ªå°åãä¹æ以ç¨è¿ä¸ªè½¯ä»¶ï¼æ¯å 为å®è½å¹é æ£åï¼é常æ¹ä¾¿ã
AutoResponder
ä¸ä¸è说å°ï¼webpackçå è½½ç¨å°äºè¿å ç±»æ件
•__webpack_hmr
•xxxxxxxxxxx.hot-update.json
•xxxxxxxxxxx.hot-update.js
DevTool开发者工具
DevTools,这个前端开发的得力助手,犹如一把多功能瑞士军刀,为开发者揭示网页的秘密。它分为九个强大的组件,每个都扮演着不可或缺的更改网页源码角色:Device Mode(设备模式): 通过快捷键Ctrl+Shift+I(Windows)或Cmd+Opt+I(Mac)一键启动,设备模式允许你模拟真实设备的响应式设计,调整网络环境,甚至模拟地理位置,以便更好地测试用户体验。
Elements(元素面板): 作为DOM和样式调试的窗口,元素面板让你实时查看和修改网页结构,设置断点,轻松诊断和优化网页表现。
Console(控制台): 控制台是你的现场指挥中心,无论是调试代码、查看消息,还是执行脚本,这里都是你发现问题和解决问题的前线阵地。
接下来,让我们深入探讨DevTools的其他功能:Source Code Panel(源代码面板): 设置断点,直接在浏览器内查看和操作代码,方便进行代码级的调试。
Network(网络面板): 网络面板实时监控网络请求,详细展示资源加载过程,提供了强大的缓存管理和网络环境模拟功能,让你洞察网络性能。
Performance(性能面板): 通过控制选项选择CPU或网络模拟,轻巧论坛源码Performance面板为你呈现帧率、CPU和网络资源使用情况,火焰图追踪DOM加载、首次绘制和load事件,细节展示每一笔性能开销。
Memory(内存面板): 内存分析器如同性能的X射线,帮助你识别出内存消耗的瓶颈,优化内存使用。
Application(应用面板): 在这里,你可以查看和管理Local Storage、Session Storage以及cookies,对用户数据的存储和管理游刃有余。
Security(安全面板): Security Overview确保你的页面安全,区分HTTP和HTTPS,左边的源详情栏让你对页面的加密状态了如指掌。
DevTools的每一个部分都是为了提升开发效率,确保网页的性能和安全性。熟练掌握这些工具,你将能在前端开发的道路上如鱼得水,轻松应对各种挑战。webpack之devtool详解
关于Devtool
该选项控制是否以及如何生成源映射。官网上给出的可选值有:
其中一些值适合开发,一些用于生产。对于开发,您通常需要快速的Source Maps,以bundle的大小为代价,但是hiredis vs源码对于生产,您需要独立的Source Maps,这是精确的,并且支持最小化。
选择一种源映射样式,以增强调试过程。这些值可以显著地影响构建和重建速度。而不是使用devtool选项还可以使用SourceMapDevToolPlugin / EvalSourceMapDevToolPlugin直接有了更多的选择。不要同时使用devtool选项和插件。devtool选项在内部添加了插件,所以你最终会得到应用两次的插件。
实例详解
1.新建print.js
export default function printMe() { console.log('武昌鱼@');}
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:,生成代码如下所示:
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:。
inline-source-map
打包后可以看到末尾的注释 sourceMap 作为DataURL的形式被内嵌进了 bundle中,由于 sourceMap 的所有信息都被加到了bundle中,整个 bundle 文件变得硕大无比。idcphp网站源码点击打印按钮,console显示print.js:3,生成代码如下所示:
main.js
eval-source-map
和 eval 类似,但是把注释里的sourceMap 都转为了 DataURL。console显示print.js?dc: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。
devtool使用介绍(1)-devtool add
devtool是一个命令行工具,其核心功能在于帮助开发者在可扩展SDK中构建、测试和打包软件,甚至通过OpenEmbedded构建系统来定制化构建SDK至镜像中。虽然devtool的主要用途在于可扩展SDK,但其功能也适用于任何需要输出构建的项目。该工具被组织到了Git中,并包含多个子命令,用户可通过执行`devtool --help`查看所有可用命令。
devtool具有三个主要子命令,它们为开发者提供了切入点,用于构建、测试和打包项目。这些子命令包括`devtool add`、`devtool modify`和`devtool upgrade`。
`devtool add`命令用于根据现有源代码生成新的recipe。此命令能够生成在工作区内的本地Git存储库中的源代码。若源代码不存在,可以提取代码,如果需要,还可以将其放置在工作空间之外的指定位置。此外,此命令还会创建一个名为recipe的文件以及相应的附加文件。如果未指定recipe名称,命令会尝试自动确定。
使用`devtool modify`命令,开发者可以指定现有的recipe,从而获取源代码及其修补方法。在构建过程中,这为开发者提供了控制源代码树的能力,并确保构建按照预期进行。
`devtool upgrade`命令用于更新现有的recipe版本,以适应最新的依赖项和构建系统更改。
在添加应用程序后,可以通过`devtool edit-recipe`编辑recipe文件,进行必要的修改。然后,开发者可以使用`devtool build`命令构建recipe,或使用`devtool build-image`命令构建包含新软件包的映像。构建后的映像可以部署到目标硬件或设备上进行测试。
为了检查构建输出在目标硬件上的工作情况,开发者可以使用`devtool deploy-target`命令将映像部署到实时目标计算机,或使用`devtool build-image`命令部署到实际硬件。在完成工作后,可以使用`devtool finish`命令将最终的recipe移至永久层,并将工作空间还原到原始状态。如果决定放弃工作,可以使用`devtool reset`命令恢复源代码树。
配置Webpack Dev Server 实战操作方法步骤
Webpack Dev Server 的实战配置是前端开发者在本地开发中的便捷工具,它能简化繁琐的编译和预览流程。本文将详细步骤演示如何配置和使用。
首先,安装最新版本的依赖,确保webpack 5..0、webpack-cli 4.9.2以及webpack-dev-server 4.x。在package.json的scripts部分,添加启动命令"serve",以简化启动服务的步骤。
在webpack.config.js文件中,新增devServer节点进行配置。基础配置如设置服务器监听的地址(如http://localhost:)和允许访问的host。此外,devServer还支持跨域代理等功能,具体详情请参考webpack-dev-server官网。
只需执行yarn serve命令,即可启动webpack dev server。此时,在浏览器访问http://localhost:,你的前端应用就可通过实时编译和刷新,提升开发效率。
为了提高调试效率,可将devtool配置为source-map,这样在浏览器控制台的错误提示将直接指向源代码,而不是打包后的代码,便于快速定位问题。默认的devtool配置可能会隐藏源码位置,不利于调试。
此外,Webpack Dev Server支持HMR(热模块替换),即在代码修改时,仅重新编译修改的部分,而不是整个项目。只需在devServer配置中启用hot: true,修改样式时页面将不会刷新,但JavaScript可能需要重启服务才能生效。现代开发工具如vue-loader通常能实现更细粒度的HMR。
通过以上步骤,你将能够充分利用Webpack Dev Server,提升本地开发的效率和便利性。
webpack的devtool 配置
devtool配置与代码调试紧密相关,旨在优化调试体验。在前端开发中,源代码经过合并、压缩、转换后,运行的是转换后的代码,这给调试带来了挑战。因此,chrome浏览器率先引入了source map技术,其他浏览器也纷纷跟进,如今几乎所有新版浏览器都支持source map。
source map本质上是一个配置,它不仅记录了所有源码内容,还记录了源码与转换后代码之间的对应关系,便于开发人员直接定位到源代码中的错误。浏览器处理source map的原理在于解析这个映射关系,从而显示正确的源代码位置信息。
最佳实践包括:在开发环境中使用source map作为调试工具,避免在生产环境中使用,以防止额外的网络传输和潜在的代码暴露风险。如果在生产环境中使用source map用于调试,需采取措施确保网络传输和代码安全。
在webpack中,devtool配置可以优化调试体验。使用正确的devtool选项,能够提供不同级别的源码映射,以适应开发与生产环境的需求。例如,"eval"配置选项在开发环境中提供快速构建,同时保留了正确的行号映射,而"cheap"配置在开发环境中提供了较低开销的映射,忽略了列映射信息。
在生产环境中,通常选择不生成source map,以优化性能。然而,如果需要生成source map,可以选择将它作为单独的文件输出,并在bundle中添加引用注释,以便开发工具查找。此外,还存在一些特定场景的配置选项,如仅生成用于错误堆栈跟踪的source map,或不包含sourcesContent的source map,以保护源代码安全。