Webpack / Rollup / Vite
文章平均质量分 65
记录Webpack / Rollup / Vite等相关知识
凯小默
专注前端领域开发。
展开
-
webpack 使用打包报错 ERROR in node_modules\@types\node\ts4.8\assert.d.ts
解决方式,先查看自己的 node 版本。然后再次打包,就没有报错了。对应版本,比如我的如下。原创 2023-11-28 21:04:35 · 1324 阅读 · 0 评论 -
vscode 里怎么自动提示 webpack 配置项?
webpack 的配置项非常多,容易忘记,能自动提示很有用,就是在配置文件里面添加下面代码。原创 2023-11-28 20:59:03 · 813 阅读 · 0 评论 -
怎么搭建第一个 Vite 项目
我们使用下面命令创建项目,先命名,然后选择 vue 跟 ts 即可。这样一个 vite 项目就搭建好了。,·npm -v· 查看版本。然后按照下面的顺序执行即可。就能看到项目已经生成了。原创 2023-03-19 01:19:14 · 330 阅读 · 0 评论 -
【TypeScript教程】# 6:使用webpack打包ts代码
尚硅谷TypeScript教程(李立超老师TS新课)学习笔记。然后添加一个 index.html 模板。成功之后就会自动帮我们打开浏览器访问页面。安装内置服务器,实时更新,方便访问项目。但是这里有个问题,就是浏览器打开会报错。不设置就不知道哪些模块可以被引用。index.ts 添加下面代码。需要配置一下不使用箭头函数。添加 babel 加载器。自动生成html文件。原创 2022-10-04 20:06:24 · 824 阅读 · 2 评论 -
使用 rollup 打包一个原生 js + canvas 实现的移动端手势解锁功能组件
2017 前端星计划选拔作业学习笔记源码笔记:用户用手指按顺序依次划过 9 个原点中的若干个(必须不少于 4 个点),如果划过的点的数量和顺序与之前用户设置的相同,那么当用户的手指离开屏幕时,判定为密码输入正确,否则密码错误。要求:实现一个移动网页,允许用户设置手势密码和验证手势密码。已设置的密码记录在本地 localStorage 中。用户选择设置密码时,要提示用户输入手势密码。如果用户输入的密码不足 5 个点,提示用户密码太短。设置成功一次密码后,提示用户再次输入密码。如果用户输入的两次密码不一致,提示原创 2022-09-15 18:31:23 · 1795 阅读 · 0 评论 -
webpack拓展篇(六十九):vite 的构建原理(完结)
因为 esbuild 里面使用的是 Golang 语言去进行打包,它是静态语言。给 hmr 相关的请求地址添加时间戳,避免缓存。编译 template,然后返回给浏览器。相对路径转绝对路径,方便浏览器请求。给非 js 类型( js 类型:如。,并在 path 的开头补上一个。玩转 webpack 学习笔记。补齐文件扩展名和经常被省略的。浏览器不支持 JS 中直接写。,把模块名替换为这个模块的。、图片、JSON 等语法。)的文件地址加上一个叫。的 query 参数。原创 2022-09-03 18:47:24 · 440 阅读 · 0 评论 -
webpack拓展篇(六十八):bundle 和 bundless 的差异
Snowpack 是一个闪电般快速的前端构建工具,专为现代网络而设计。它是开发工作流程中更重、更复杂的打包工具(如 webpack 或 Parcel)的替代品。Snowpack 利用 JavaScript 的本机模块系统(称为 ESM)来避免不必要的工作并保持快速,无论您的项目有多大。bundle 浏览器最开始会加载一个 bundle.js 文件。bundless 直接加载原文件,不是加载构建好的。bundless:浏览器请求多个文件。玩转 webpack 学习笔记。打包会合并文件,减少请求数。原创 2022-09-03 18:12:24 · 1347 阅读 · 0 评论 -
webpack拓展篇(六十七):webpack5 新特性解析
Webpack 内部通过 ModuleFederationPlugin 插件将多个应用结合起来。name:必须,唯一 ID, 作为输出的模块名,使用的时通过的方式使用library:必须,其中这里的 name 为作为 umd 的 name;.remotes:可选,表示作为 Host 时,去消费哪些 Remote;shared:可选,优先用 Host 的依赖,如果 Host 没有,再用自己的;main.js:应用主文件remoteEntry.js:作为 remote 时被引的文件。原创 2022-09-03 14:29:53 · 2477 阅读 · 0 评论 -
webpack项目篇(六十六):react 全家桶 和 webpack 开发 h5 商城项目的整体思路
安装 react、react-dom、redux、react-redux。创建 actions、reducers、store 等。玩转 webpack 学习笔记。用于 webpack 的配置。原创 2022-09-02 16:26:59 · 688 阅读 · 0 评论 -
webpack原理篇(六十五):实战开发一个压缩构建资源为zip包的插件
Hooks 是 emit,是一个异步的 hook (AsyncSeriesHook),emit 生成文件阶段,读取的是 compilation.assets 对象的值。我们可以解压一下这个文件,发现是 ok 的。复制一下上次的插件环境,修改一下名称为。玩转 webpack 学习笔记。jszip 使用示例。...原创 2022-08-31 01:54:12 · 546 阅读 · 0 评论 -
webpack原理篇(六十四):更复杂的插件开发场景
通过 compilation 对象的 warnings 和 errors 接收。在插件的事件节点进行监听,一旦执行到就可以根据获取到的资源进行处理。Compilation 上的 assets 可以用于文件写入。参数校验阶段可以直接 throw 的方式抛出。玩转 webpack 学习笔记。通过插件的构造函数进行获取。...原创 2022-08-31 01:12:28 · 314 阅读 · 0 评论 -
webpack原理篇(六十三):插件基本结构介绍
新建文件夹 my-plugin 文件夹,执行。插件没有像 loader 那样的独立运行环境。新建 plugins 文件夹,里面添加。只能在 webpack 里面运行。玩转 webpack 学习笔记。加入到 webpack 配置中。原创 2022-08-31 01:05:02 · 225 阅读 · 0 评论 -
webpack原理篇(六十二):实战开发一个自动合成雪碧图的loader
新建文件夹 sprite-loader,然后执行下面命令初始化项目。然后在 loaders 文件夹添加图片跟 css 文件。我们在 src 的 img 文件夹里添加 3 张图片。然后我们查看一下 dist 目录,我们发现加了。然后可以看到 dist 目录生成了一个。最后在 loaders 文件里添加。玩转 webpack 学习笔记。对样式里面图片引用后面加。图片也是,只合成了加了的。...原创 2022-08-30 18:14:30 · 736 阅读 · 1 评论 -
webpack原理篇(六十一):更复杂的 loader 的开发场
模板和正则表达式在当前加载器的上下文中设置为名为 name 和 regExp 的查询参数。通过 loader-utils 的 getOptions 方法获取。缓存条件: loader 的结果在相同的输入下有确定的输出。我们在 loader-order 项目里安装依赖。webpack 中默认开启 loader 缓存。可以看到使用了 interpolateName。loader 内直接通过 throw 抛出。,可以看到生成出来了 index 文件。我们可以看一下 dist 文件夹。还有 emitFile。...原创 2022-08-30 02:16:21 · 947 阅读 · 0 评论 -
webpack原理篇(六十):使用 loader-runner 高效进行 loader 的调试
定义:loader-runner 允许你在不安装 webpack 的情况下运行 loaders作为 webpack 的依赖,webpack 中使用它执行 loader进行 loader 的开发和调试。原创 2022-08-29 20:13:27 · 836 阅读 · 0 评论 -
webpack原理篇(五十九):loader 的链式调用与执行顺序
定义:loader 只是一个导出为函数的 JavaScript 模块。新建文件夹 loader-order,然后执行初始化命令。结构如下:loader 的代码在上面,这里就不粘贴了。多个 Loader 串行执行顺序从后到前。玩转 webpack 学习笔记。,我们就可以知道顺序是。...原创 2022-08-29 19:01:29 · 1082 阅读 · 0 评论 -
webpack原理篇(五十八):实战开发一个简易的webpack
抽象语法树(abstract syntax tree 或者缩写为 AST),或者语法树(syntax tree),是源代码的抽象语法结构的树状表现形式,这里特指编程语言的源代码。打包完成之后我们可以看到多了一个 dist 的文件夹,里面有打包好的。新建 lib 文件夹,首先添加 index.js 文件,到时执行。新建 mini-webpack 文件夹,执行下面命令,初始化项目。然后打包,成功之后刷新页面,我们可以看到效果也变了。文件,里面依赖 common 文件夹里的。新建 src,里面添加。...原创 2022-08-29 18:16:03 · 344 阅读 · 0 评论 -
webpack原理篇(五十七):webpack流程:文件生成
webpack流程:文件生成原创 2022-08-29 00:39:11 · 419 阅读 · 0 评论 -
webpack原理篇(五十六):webpack流程:模块构建和chunk生成阶段
创建完一个 NormalModule 之后的构建,找到开始构建某个模块的 build-module。使用了 acorn,目的是把代码里的 require 依赖添加到模块依赖列表里面去。40 行,执行 addEntry 方法 make 构建阶段正式开始。里的 finish 方法,这里的 module 就是处理之后的源码。NormalModuleFactory :直接导出摸个函数的。上一节到了run这里,下面看一下 compile。执行完 doBuild 之后就会解析。玩转 webpack 学习笔记。...原创 2022-08-28 18:04:58 · 654 阅读 · 0 评论 -
webpack原理篇(五十五):webpack流程:准备阶段
WebpackOptionsApply 将所有的配置 options 参数转换成 webpack 内部插件。可以看到在 entry-option 跟 run 之间有个 beforeRun,用于清理构建的缓存。WebpackOptionsDefaulter 做一些初始的操作。然后找到 WebpackOptionsApply 的 291 行。再看看 NodeEnvironmentPlugin。webpack 的编译都按照下面的钩子调用顺序执行。,这里使用 git bash 工具执行下面命令。...原创 2022-08-28 17:12:47 · 274 阅读 · 0 评论 -
webpack原理篇(五十四):Tapable是如何和webpack进行关联起来的?
我们根据上面的代码新建两个文件,添加上面代码。玩转 webpack 学习笔记。原创 2022-08-28 16:12:48 · 250 阅读 · 0 评论 -
webpack原理篇(五十三):Tapable插件架构与Hooks设计
定义一个 Car 方法,在内部 hooks 上新建钩子。Tapable 是一个类似于 Node.js 的 EventEmitter 的库, 主要是控制钩子函数的发布与订阅,控制着 webpack 的插件系统。Webpack 可以将其理解是一种基于事件流的编程范例,一系列的插件运行。Tapable 暴露出来的都是类方法,new 一个类方法获得我们需要的钩子。Tapable 库暴露了很多 Hook(钩子)类,为插件提供挂载的钩子。异步绑定钩子的方法,并且他们都有绑定事件和执行事件对应的方法。......原创 2022-08-28 01:40:43 · 403 阅读 · 0 评论 -
webpack原理篇(五十二):webpack-cli源码阅读
提供命令和分组参数动态生成 help 帮助信息。原创 2022-08-27 23:31:38 · 356 阅读 · 0 评论 -
webpack原理篇(五十一):webpack启动过程分析
webpack 最终找到 webpack-cli (webpack-command) 这个 npm 包,并且执行 CLI。通过 npm scripts 运行 webpack。在命令行运行以上命令后,npm会让命令行工具进入。文件,如果存在,就执行,不存在,就抛出错误。玩转 webpack 学习笔记。通过 webpack 直接运行。...原创 2022-08-27 15:00:31 · 661 阅读 · 0 评论 -
webpack优化篇(五十):使用动态 Polyfill 服务
比如:国内的浏览器魔改会导致识别 User Agent 出现问题,这种情况可以降级使用全部返回的。访问页面,发送请求,识别 User Agent,然后下发不同的 Polyfill。babel-polyfill 打包后体积:88.49k,占比 29.6%基于官方自建 polyfill 服务。比如:promise 可以打开网址。玩转 webpack 学习笔记。原创 2022-08-22 02:42:58 · 1011 阅读 · 0 评论 -
webpack优化篇(四十九):使用 webpack 进行图片压缩
要求:基于 Node 库的 imagemin 或者 tinypng API。下面运行打包命令,可以看到效果还是很明显的,只有 1.0.9 M 了。下载下来,我们添加到项目里面使用它,它有 2.17 M。使用:配置 image-webpack-loader。网站下载一张图片,这个网站的图片没有版权问题。安装依赖:这里使用 5.0.0 版本的。玩转 webpack 学习笔记。原创 2022-08-22 01:19:52 · 3742 阅读 · 0 评论 -
webpack优化篇(四十八):使用 Tree Shaking 擦除无用的 JavaScript 和 CSS
概念:1 个模块可能有多个方法,只要其中的某个方法使用到了,则整个文件都会被打到 bundle 里面去,tree shaking 就是只把用到的方法打入 bundle ,没用到的方法会在 uglify 阶段被擦除掉。然后我们打包,去 dist 目录里找到 search 的 css 文件,可以看到这个类也打包进去了,我格式化了一下 css 文件。添加好之后,运行打包命令,我们可以看到没有使用的类就被清除掉了。我们在 search 的css 里添加一个没用使用的类。使用:webpack 默认支持,在。原创 2022-08-21 06:56:59 · 909 阅读 · 0 评论 -
webpack优化篇(四十七):缩小构建目标
比如 babel-loader 不解析 node_modules。下面运行打包命令,可以看到速度还是有一些提升的。玩转 webpack 学习笔记。先不缩小构建目标,然后运行。目的:尽可能的少构建模块。然后添加缩小目标的配置。原创 2022-08-21 06:27:44 · 186 阅读 · 0 评论 -
webpack优化篇(四十六):充分利用缓存提升二次构建速度
当我们再次运行的时候:发现还有有点效果,这个还是跟模块有关,越多效果越明显。目录下会生成一个 terser-webpack-plugin 的文件夹。目录下会生成一个 babel-loader 的文件夹。我们可以看一下打包效果:可以看到提升的效果还是很明显的。目录下会生成一个 hard-source 的文件夹。玩转 webpack 学习笔记。目的:提升二次构建速度。我们可以发现速度很快。原创 2022-08-20 18:08:01 · 1015 阅读 · 0 评论 -
webpack优化篇(四十五):进一步分包:预编译资源模块
方法:使用 DLLPlugin 进行分包,DllReferencePlugin 对 manifest.json 引用。思路:将 react、react-dom、redux、react-redux 基础包和业务基础包打包成一个文件。思路:将 react、react-dom 基础包通过 cdn 引入,不打入 bundle 中。方法:使用 html-webpack-externalsplugin。在 webpack.config.js 引入。里添加 dll 分包的脚本。. 先不分包,运行一下。...原创 2022-08-19 01:58:43 · 550 阅读 · 0 评论 -
webpack优化篇(四十四):多进程并行压缩代码
然后把 parallel 设置成 true,开启后速度有了一定的提升。启用多进程并行运行来缩小/最小化 JavaScript 还是很有作用的。我们先把 parallel 设置成 false。先安装依赖,这里使用 1.3.0 的。玩转 webpack 学习笔记。不支持 es6 语法。如果使用 5.3.5。...原创 2022-08-18 02:43:15 · 717 阅读 · 0 评论 -
webpack优化篇(四十三):多进程/多实例构建:资源并行解析可选方案
原理:每次 webpack 解析一个模块,threadloader 会将它及它的依赖分配给 worker 线程中。原理:每次 webapck 解析一个模块,HappyPack 会将它及它的依赖分配给 worker 线程中。在使用之前我们先增加一些页面,提升效果更明显。,我们发现时间也有了明显的下降,玩转 webpack 学习笔记。接下来使用 happypack。,我们可以看到有 3 个线程。可以看到时间有了明显的下降。...原创 2022-08-18 02:06:04 · 495 阅读 · 0 评论 -
webpack优化篇(四十二): 使用高版本的 webpack 和 Node.js
相比 webpack 3 构建时间降低了 60%-98%!玩转 webpack 学习笔记。map 速度提升对比。原创 2022-08-17 21:34:56 · 1396 阅读 · 0 评论 -
webpack优化篇(四十一):体积分析:使用 webpack-bundle-analyzer
我们就可以针对的找出问题,进行相应的处理。构建完成后会在 8888 端口展示大小。为了更好的看到效果,我们添加一个。玩转 webpack 学习笔记。然后 search 页面引入。另外,在注释掉提取出来的。...原创 2022-08-17 02:21:55 · 538 阅读 · 0 评论 -
webpack优化篇(四十):速度分析:使用 speed-measure-webpack-plugin
可以看到每个 loader 和插件执行耗时,比较耗时的用红色的标记出来。,我们可以看到每个插件loader的耗时。玩转webpack学习笔记。原创 2022-08-17 01:05:38 · 6078 阅读 · 5 评论 -
webpack优化篇(三十九):初级分析:使用 webpack 内置的 stats
运行下面命令,可以看到打包的信息时间,但无法分析出那个 loader 时间长。stats: 构建的统计信息,每个资源大小,总共消耗的时间。在 package.json 文件中添加。文件,里面有模块相关的信息。玩转webpack学习笔记。颗粒度太粗,看不出问题所在。...原创 2022-08-17 00:40:15 · 919 阅读 · 0 评论 -
webpack配置篇(三十八):语义化版本(Semantic Versioning)规范格式
说明玩转webpack学习笔记开源项目版本信息案例软件的版本通常由三位组成,形如:X.Y.Z版本是严格递增的,此处是:16.2.0 -> 16.3.0 -> 16.3.1在发布重要版本时,可以发布 alpha, rc 等先行版本alpha 和 rc 等修饰版本的关键字后面可以带上次数和 meta 信息React 版本信息遵守 semver 规范的优势优势:避免出现循环依赖依赖冲突减少语义化版本(Semantic Versioning)规范格式主版本号:当你做了不原创 2022-08-16 00:43:01 · 277 阅读 · 0 评论 -
webpack配置篇(三十七):Git 规范和 Changelog 生成
说明玩转webpack学习笔记介绍良好的 Git commit 规范优势:加快 Code Review 的流程根据 Git Commit 的元数据生成 Changelog后续维护者可以知道 Feature 被修改的原因技术方案提交格式要求本地开发阶段增加 precommit 钩子安装 huskynpm install husky --save-dev通过 commitmsg 钩子校验信息"scripts": { "commitmsg": "validate-commit原创 2022-08-15 22:23:13 · 326 阅读 · 0 评论 -
webpack配置篇(三十六):发布构建包到npm社区
说明玩转webpack学习笔记发布到 npm添加用户: npm add user升级版本升级补丁版本号:npm version patch升级小版本号:npm version minor升级大版本号:npm version major发布版本:npm publish原创 2022-08-15 22:15:34 · 266 阅读 · 0 评论 -
webpack配置篇(三十五):持续集成和Travis CI
说明玩转webpack学习笔记持续集成的作用优点:快速发现错误防止分支大幅偏离主干核心措施是,代码集成到主干之前,必须通过自动化测试。只要有一个测试用例失败,就不能集成。Github 最流行的 CI接入 Travis CI1. https://travis-ci.org/ 使用 GitHub 账号登录2. 在 https://travis-ci.org/account/repositories 为项目开启3. 项目根目录下新增 .travis.ymltravis.yml 文件原创 2022-08-15 22:01:50 · 223 阅读 · 0 评论