![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Webpack
¡Venceremo
这个作者很懒,什么都没留下…
展开
-
Webpack: Plugin 学习——功能Plugin :在 webpack 打包输出的js文件比较小,将js文件变成行内内联样式添加到文件中
webpack 打包生成的 runtime 文件太小了,额外发送请求性能不好,所以需要将其内联到 js 中,从而减少请求数量)——提升速度 runtime保存依赖和hash。嵌入到html中需要使用html-webpack-plugin插件。首先需要在配置文件中进行打包输出runtime文件。为了匹配度更高,将传递的规则放在配置文件中。原创 2023-04-06 20:50:26 · 345 阅读 · 0 评论 -
Webpack: Plugin 学习——功能Plugin :分析 webpack 打包资源大小,并输出分析文件格式为.md
AnalyzeWebpackPlugin作用:分析 webpack 打包资源大小,并输出分析文件 .mdZ格式。, 它是在打包输出前触发,我们需要分析资源大小同时添加上分析后的 md 文件。1. 遍历所有即将输出文件,得到其大小。webpack配置使用。2、生成一个md文件。原创 2023-04-06 18:55:21 · 338 阅读 · 0 评论 -
Webpack: Plugin 学习——功能Plugin :在 webpack 打包输出前将上次打包内容清空
清除文件(readdirSync 读取文件夹下面的所有文件 statSync分析文件信息 isDirectory判断是文件夹还是文件 unlinkSync删除文件)CleanWebpackPlugin:在 webpack 打包输出前将上次打包内容清空。将配置文件的clean:true删除。它是打包输出前触发。原创 2023-04-06 16:44:02 · 320 阅读 · 0 评论 -
Webpack: Plugin 学习——功能Plugin :给打包输出文件添加注释
目的:给打包输出文件添加注释:BannerWebpackPlugin。前面的loader中:只能在开发模式使用因为压缩原因。Plugin 希望两个模式都可以。配置文件中使用 注册。并将模式改成生产模式。原创 2023-04-06 11:17:51 · 279 阅读 · 0 评论 -
Webpack: Plugin 学习——查看compiler对象和compilation对象
在json种添加指令:--inspect=调试 -brk在首行打一个断点 执行webpack指令。使用node调试的方法对数据进行观测 debugger;程序运行到此就会停住。存在了compiler对象 观察compiler对象=此时任意打开chrome浏览器——出现绿色图标 点击它。将数据输出,显示一下但是数据非常长,难以观察。分为3部分:文件情况 文件具体详情 调试面板。手动打断点--观察compilation对象。运行:npm run debug。原创 2023-04-06 10:48:07 · 176 阅读 · 0 评论 -
Webpack: Plugin 学习——注册 hook (注册钩子)
3、由文档可知,make是异步并行钩子 AsyncParallelHook(谁先做完谁调用)钩子 AsyncSeriesHook(串行意味着定义多个emit函数 123顺序执行)1、environment是同步钩子,所以需要使用tap注册 SyncHook。1、compilation hooks触发前注册才能使用。2、 由文档可知,emit是异步。生命周期钩子函数,是由。原创 2023-04-04 17:05:55 · 624 阅读 · 0 评论 -
Webpack: Plugin 学习作用原理
webpack工作流程 就像一条生产线,要经过一系列处理流程后才能将源文件转换成输出结果。 这条生产线上的每个处理流程的职责都是单一的,多个流程之间有存在依赖关系,只有完成当前处理后才能交给下一个流程去处理。 插件就像是一个插入到生产线中的一个功能,在特定的时机对生产线上的资源做处理。 webpack 通过 Tapable 来组织这条复杂的生产线。 webpack 在运行过程中会广播事件,插件只需要监听它所关心的事件,就能加入到这条生产线中,去改原创 2023-04-04 16:21:38 · 264 阅读 · 0 评论 -
Webpack:Loader学习——功能loader,style-loader(动态创建 style 标签,插入 js 中的样式代码,使样式生效)
使用picth方法(可以接收3个参数 但是目前先使用一个参数remainingRequest 剩下还需要处理的loader)——得到css-loader处理的结果。,style-loader需要执行js代码,得到返回值,再动态创建style标签,插入到页面上——不好操作。所以必须使用css loader 借助css-loader解决样式中引入的其他资源的问题(解决依赖)直接使用style-loader,只能处理样式、不能处理样式中引入的其他资源。css-loader暴露了一段js代码。原创 2023-04-04 14:43:18 · 845 阅读 · 0 评论 -
Webpack:Loader学习——功能loader,给输出的文件追加作者信息——给 js 代码添加文本注释
"additionalProperties": false //不能追加属性 这个options里面只有一个属性。追加不同人的名字:是一个可配置项目——使用方法this.getOptions获取normal选择。schema:添加验证规则 (schema符合JSON Schema的规则)其中配置文件 :报错—验证规则不符合 字符串类型 只有一个属性。再webpack中引入。原创 2023-04-03 11:22:06 · 235 阅读 · 0 评论 -
Webpack:Loader学习——功能loader,去除console.log
用来清理 js 代码中的console.log原创 2023-04-03 11:07:06 · 178 阅读 · 0 评论 -
Webpack:Loader学习——loader API(loader函数里面的方法)
this.getOptions(schema)schema规则。异步回调 loader。返回 this.callback。可以同步或者异步调用的并返回多个结果的函数。获取 loader 的 options。原创 2023-04-03 10:56:54 · 185 阅读 · 0 评论 -
Webpack:Loader学习—— Pitching Loader
在这个过程中如果任何 pitch 有返回值return,则 loader 链被阻断。webpack 会跳过后面所有的的 pitch 和 loader,直接进入。Pitching 方法先执行(针对normal loader先 前到后执行Pitching 再后到前执行normal loader)loader (将5return)——垄断机制(拒绝后面的执行)原创 2023-04-03 10:49:22 · 162 阅读 · 0 评论 -
Webpack:Loader学习——Raw Loader
【代码】Webpack:Loader学习——Raw Loader。原创 2023-04-03 10:24:16 · 310 阅读 · 0 评论 -
Webpack:Loader学习——异步 loader
先执行1,但是没有返回值(所以变成undefined)test2处理就变成content=undefined。先执行2(1s之后反应)在执行1。运行npx webpack。同步中+异步loader。规则中先执行1 在执行2。使用这两个loader。原创 2023-04-03 10:13:35 · 212 阅读 · 0 评论 -
Webpack:Loader学习——同步 loader
第三个参数:source-map 继续传递source-map ---传递给下一个loader。第一个参数:err 代表是否有错误 null表示没有错误。第四个参数:meta 给下一个loader传递参数。第二个参数:content 处理后的内容。方法则更灵活,因为它允许传递多个参数,而不仅仅是。SourceMap 数据。数据,可以是任何内容。原创 2023-03-30 18:46:18 · 130 阅读 · 0 评论 -
Webpack:Loader学习:开发一个最简单的 loader
loader接受到文件内容作为参数,返回内容出去 content 文件内容 map SourceMap。loader就是一个函数, 当webpack解析资源时,会调用相应的loader去处理,配置webpack.config.js。meta 别的loader传递的数据。运行:npx webpack。原创 2023-03-30 18:37:44 · 121 阅读 · 0 评论 -
Webpack:Loader学习作用 原理
作用:帮助 webpack 将不同类型的文件转换为 webpack (只能识别js/jsx)可识别的模块。下面的两个例子,引入样式代码,指定了两个loader?文件中指定 loader。(pre、normal、post loader)语句中显式指定 loader。跳过 pre、 normal 和 post loader。跳过 pre 和 normal loader。分类: pre:前置 loader。inline:内联 loader。跳过 normal loader。将资源中的 loader 分开。原创 2023-03-30 16:52:22 · 166 阅读 · 0 评论 -
Webpack项目学习:Vue-cli(脚手架)-优化配置 -ui库element-plus+减小打包体积 -按需加载+自定义主题+优化
全部引入,在入口文件main.js。启动:npm start。原创 2023-03-30 16:01:45 · 1981 阅读 · 0 评论 -
Webpack项目学习:Vue cli(脚手架)-合并开发和生产模式的配置-提高复用性
【代码】Webpack项目学习:Vue cli(脚手架)-合并开发和生产模式的配置-提高复用性。原创 2023-03-30 15:41:18 · 155 阅读 · 0 评论 -
Webpack项目学习:开始搭建和Vue-cli(脚手架)-生产模式配置
将packlock删除,将其他所有依赖复制过去就可以。原创 2023-03-30 15:22:26 · 91 阅读 · 0 评论 -
Webpack项目学习:开始搭建和Vue-cli(脚手架)-开发模式配置
"vue-style-loader",//将js中css通过创建style标签添加到html中。使用vue Loader编译vue单文件组件。帮助实现js vue热模块替换功能。eslint bable指示文件。运行报错了:在内部定义 环境变量。检HMR功能有没有:--加组件。改变样式 --有HMR功能。下载组件-初始化配置。配置config文件。原创 2023-03-30 10:57:15 · 289 阅读 · 0 评论 -
Webpack项目学习:React-cli(脚手架)-优化配置 -antd样式(antdesign)+减小打包体积
preProcessor对less-loader进行判断-是否存在。关闭性能提示 performance:false。给组件添加样式 button app.jsx。splitChunks进行单独打包。在main.js引入样式。并且引入less样式。原创 2023-03-28 18:13:37 · 1039 阅读 · 0 评论 -
Webpack项目学习:React-cli(脚手架)-合并开发和生产模式的配置-提高复用性
/获取process进程上的env环境变量上的NODE_ENV。在package.json中有NODE_ENV=模式可以知道。MiniCssExtractPlugin旨在生成模式使用。开发模式希望有个HMR功能-借助插件+判断。重点是怎么知道当前环境的运行环境。如何获取NODE_ENV。查看打印结果,报错没关系。获取不同模式 进行判断。运行npm start。原创 2023-03-28 18:13:21 · 274 阅读 · 0 评论 -
Webpack项目学习:开始搭建和React-cli(脚手架)-生产模式配置
但是网站并没有打开这个图标,原因是没有解析html资源,只要将public复制到index里面,使用插件。此时刷新会报错,因为使用的是vs的内部open liveserver 404问题。devServer不需要HMR不需要,因为是生产模式的代码。由于访问的不是根目录dist所以出不来使用serve 访问。对css压缩了之后,对js压缩,不然会出问题。对图片压缩,由于我下载不下包来就不设置了。样式有要求提取样式成为单独文件,并且对样式css压缩。原创 2023-03-28 18:12:54 · 174 阅读 · 0 评论 -
Webpack项目学习:开始搭建和react-cli(脚手架)-开发模式配置
报错:Can't resolve './App' in 'E:\ECMAScript6-11\webpack_rectcli\src'关于css兼容性,需要考虑兼容性问题-配合package.json中的browserslist来指定兼容性。处理js代码:eslint对js代码检查,babel对js代码转换。还需要配置文件指示做什么babel.config.js,官方预设了。测试HMR,改变代码不更新全部更新部分,改变颜色,只改变部分。使用插件,自动完成HMR功能,js模块热更新。原创 2023-03-28 18:13:07 · 565 阅读 · 0 评论 -
Webpack高级学习结
本地项目静态图片才需要进行压缩。使用 @babel/plugin-transform-runtime 插件对 babel 进行处理,让辅助代码从中引入,而不是每个文件都生成辅助代码,从而体积更小。(需要注意的是,进程启动通信都有开销的,要在比较多代码处理时使用才有效果)使用 HotModuleReplacement 让开发时只重新编译打包更新变化了的代码,不变的代码使用缓存,从而使更新速度更快。使用 Preload / Prefetch 对代码进行提前加载,等未来需要使用时就能直接使用,从而用户体验更好。原创 2023-03-28 18:14:30 · 45 阅读 · 0 评论 -
Webpack高级学习:优化代码运行性能-PWA(渐进式网络应用程序)
开发 Web App 项目,项目一旦处于网络离线情况,就没法访问了。我们希望给项目提供离线体验。只要断网就啥也没有。原创 2023-03-27 09:25:27 · 203 阅读 · 0 评论 -
Webpack高级学习:优化代码运行性能-Core-js
过去我们使用 babel 对 js 代码进行了兼容性处理,其中使用@babel/preset-env 智能预设来处理兼容性问题。它能将 ES6 的一些语法进行编译转换,比如箭头函数、点点点运算符等。但是如果是async 函数、promise 对象、数组的一些方法(includes)等,它没办法处理。所以此时我们 js 代码仍然存在兼容性问题,一旦遇到低版本浏览器会直接报错。所以我们想要将 js 兼容性问题彻底解决。做一个具有兼容性的语法使用promise重新打包观察打包后的文件。原创 2023-03-27 09:22:59 · 2057 阅读 · 0 评论 -
Webpack高级学习:优化代码运行性能-Network Cache
但是 main.js 文件的 hash 值也发生了变化,这会导致 main.js 的缓存失效。当我们修改 math.js 文件再重新打包的时候,因为 contenthash 原因,math.js 文件 hash 值发生了变化(这是正常的)。runtime 文件只保存文件的 hash 值和它们与文件依赖关系,整个文件体积就比较小,所以变化重新请求的代价也小。更新后:math.yyy.js, main.js 引用的 math.yyy.js, 文件名发生了变化,间接导致 main.js 也发生了变化。原创 2023-03-27 09:24:48 · 315 阅读 · 0 评论 -
Webpack高级学习:Preload / Prefetch
我们前面已经做了代码分割,分成chunk,同时会使用 import 动态导入语法来进行代码按需加载(我们也叫懒加载,比如路由懒加载就是这样实现的)。当前页面优先级高的资源用 Preload 加载。下一个页面需要使用的资源用 Prefetch 加载。但是加载速度还不够好,比如:是用户点击按钮时才加载这个资源的,需要使用的资源,Prefetch既可以加载当前页面资源,在浏览器空闲的时候加载,最后的时候空闲的时候加载。空闲时间,加载后续需要使用的资源。加载下一个页面需要使用的资源。Preload加载优先级高。原创 2023-03-27 09:24:33 · 393 阅读 · 1 评论 -
Webpack高级学习:优化代码运行性能-Code Split-代码分割-统一命名
动态加载,将代码打包成为chunk。图片和图标,有很多相似命名,复用。通过type:asset处理资源。原创 2023-03-27 09:24:15 · 158 阅读 · 0 评论 -
Webpack高级学习:优化代码运行性能-Code Split-代码分割-给模块命名
在main.js里面+/*webpackChunkName:"math"*/webpack魔法命令规则。在配置文件中输出指定//给打包输出的文件命名。原创 2023-03-27 09:21:47 · 112 阅读 · 0 评论 -
Webpack高级学习:优化代码运行性能-Code Split-代码分割-单入口
由于最开始我们的案例就是使用单入口文件,直接追加就可以,生成模式。但是会报错原因在于eslint不能识别动态绑定语法,需要额外配置。开发时我们可能是单页面应用(SPA),只有一个入口(单入口)给页面追加按钮index。原创 2023-03-27 09:23:31 · 132 阅读 · 0 评论 -
Webpack高级学习:优化代码运行性能-Code Split-代码分割-多入口按需加载
如何想要运行代码,由于是默认暴露,函数在default里面。想要实现按需加载,动态导入模块。我们希望一开始不这样加载 ,点击的时候才加载。发现 一上来3个js文件都加载了。原创 2023-03-27 09:20:46 · 88 阅读 · 0 评论 -
Webpack高级学习:优化代码运行性能-Code Split-代码分割-多入口提取公共模块
两个文件都使用道了相同的模块部分,代码复用性不高。入口文件引入了相同的文件,会生成两份相同的文件。需要配置optimization。原创 2023-03-27 09:20:29 · 136 阅读 · 0 评论 -
Webpack高级学习:优化代码运行性能-Code Split-代码分割-多入口
打包代码时会将所有 js 文件打包到一个文件中,体积太大了。如果只要渲染首页,就希望只加载首页的 js 文件,其他文件不应该加载。所以将打包生成的文件进行代码分割,生成多个 js 文件,渲染哪个页面就只加载某个 js 文件,这样加载的资源就少,速度就更快。分割文件:将打包生成的文件进行分割,生成多个 js 文件。输出了多个文件,配置了几个入口,至少输出几个 js 文件。按需加载:需要哪个文件就加载哪个文件。创建新文件,多入口文件,使用对象表示。多入口文件会生成多个文件。原创 2023-03-27 09:22:33 · 77 阅读 · 0 评论 -
Webpack高级学习:压缩图片
注意:如果项目中图片都是在线链接,那么就不需要了。只有本地项目静态图片才需要进行压缩。开发如果项目中引用了较多图片,那么图片体积会比较大,将来请求速度比较慢。发现少了pegtran.exe、jpegtran.exe。我是直接把包放进去了 ,因为下载不成功,所以直接移入。我们可以对图片进行压缩,减少图片体积。无损:不损害内容——移入了下面的。jpegtran 官网地址。OptiPNG 官网地址。下载包-压缩图片的插件。原创 2023-03-24 09:37:01 · 1619 阅读 · 0 评论 -
Webpack高级学习:减少Babel生成文件的体积
禁用了 Babel 自动对每个文件的 runtime 注入,而是引入 @babel/plugin-transform-runtime 并且使所有辅助代码从这里引用。Babel 对一些公共方法使用了非常小的辅助代码,比如 _extend。默认情况下会被添加到每一个需要它的文件中。将这些辅助代码作为一个独立模块,来避免重复引入。为编译的每个文件都插入了辅助代码。配置开发模式生产模式都可以做。原创 2023-03-24 09:36:48 · 212 阅读 · 0 评论 -
Webpack高级学习:减少代码体积-Tree Shaking
开发时我们定义了一些工具函数库,或者引用第三方工具函数库或组件库。Tree Shaking 它依赖 ES Module。webpack 已经默认开启了这个功能,无需其他配置。Tree Shaking 是一个术语,通常用于描述。移除 JavaScript 中的没有使用上的代码。,但是实际上可能我们可能只用上。如果没有特殊处理的话我们。原创 2023-03-24 09:38:34 · 86 阅读 · 0 评论 -
Webpack高级学习:多进程打包Thead
打包的内容都很少,由于启动进程开销原因,使用多进程打包实际上会显著的让我们打包时间变得很长。仅在特别耗时的操作中使用,因为每个进程启动就有大约为 600ms 左右开销。当项目越来越庞大时,打包速度越来越慢,甚至于需要一个下午才能打包出来代码。同时处理 js 文件,这样速度就比之前的单进程打包更快了。开启多进程(开启电脑的多个进程同时干一件事,速度更快)获取 CPU 的核数,因为每个电脑都不一样。我们想要继续提升打包速度,其实就是。在js,由于是多个模块就使用use。,所以我们要提升它们的运行速度。原创 2023-03-24 09:38:22 · 1421 阅读 · 0 评论