Webpack
文章平均质量分 86
花铛
这个作者很懒,什么都没留下…
展开
-
ESLint
Lint 是检验代码格式工具的一个统称,具体的工具有 Jslint 、 Eslint 等等。ESLint 是一个静态代码分析工具,在没有任何程序执行的情况下,对代码进行分析。ESLint 可以帮助在项目中建立统一的团队代码规范,保值正确、统一的代码风格,提高代码的可读性、可维护性。原创 2021-01-25 14:36:47 · 622 阅读 · 0 评论 -
prettier
prettier 是一款强大的代码格式化工具,可以按照配置信息来格式化文件。支持 JavaScript、TypeScript、CSS、SCSS、Less、JSX、Anguiar、Vue、JSON、Markdown 等语言, 基本上前端能用到的文件格式它都支持。原创 2023-07-02 13:20:56 · 284 阅读 · 0 评论 -
《一》Webpack 基础
Webpack 是一个为现代的 JavaScript 应用程序提供静态的模块化的打包工具。目前前端流行的三大框架都是基于 Webpack 的。原创 2023-08-07 17:02:40 · 38 阅读 · 0 评论 -
《二》Webpack 的配置文件和常见的配置选项
当执行webpack命令时,会先去根目录下查找是否有配置文件。如果有,就会读取该配置文件中的配置去执行相关的编译;如果没有的话,就会根据默认配置去执行相关的编译。在项目根目录下新建配置文件,通过导出。因为 Webpack 是在 Node 环境下执行的,Webpack 查找和读取配置文件的时候,是通过 CommonJS 的方式,因此在 Webpack 配置文件中要通过 CommonJS 的方式导出。可以导出一个对象。也可以导出一个函数,将会接收一个参数,返回值是一个对象。原创 2023-08-21 22:39:28 · 210 阅读 · 0 评论 -
《二十三》Webpack 的模块化原理
开发者在代码中可以使用各种各样的模块化,Webpack 对其打包后会进行转换,可以直接在浏览器中运行。其中最常见的 CommonJS 和 ESModule。原创 2023-09-11 09:25:31 · 47 阅读 · 0 评论 -
《三十一》开发模式构建工具 Vite
基于 Vite4。在实际开发中,编写的代码往往是不能被浏览器直接识别的,例如 ES6+、React、Vue、TypeScript 等,必须通过构建工具来对代码进行转换、编译,例如 Webpack、Rolluop、Vite 等。Vite:下一代前端开发与构建工具,能够显著地提升前端开发体验。原创 2023-12-10 20:22:04 · 221 阅读 · 0 评论 -
Browserslist
不同浏览器支持特性的兼容性:是指某些 CSS 特性、JS 语法等,有些浏览器支持,有些浏览器不支持。目前解决这个兼容性问题非常简单,已经有工具可以自动帮助开发人员处理了。例如:autoprefixer 可以自动给 CSS 添加浏览器前缀,以兼容不同的浏览器;babel 可以对 JS 语法进行转换。但是,并不需要给所有浏览器都做兼容性处理。因为某些浏览器可能市场占有率已经很低,几乎没有人再使用了,再针对它做兼容性处理,反而增加了项目的包体积。原创 2023-08-29 22:38:43 · 136 阅读 · 0 评论 -
《二十一》DLL 库
DLL:Dynamic Link Library,动态链接库。最早的时候是 Windows 系统中在多个软件之间实现共享函数库的一种方式。Webpack 中也有内置 DLL 的功能,指的是可以将不经常改变的代码,抽取成一个共享的库,之后就可以将其直接引入到需要的项目中了。从 Webpack4 开始用的已经很少了。React 脚手架和 Vue 脚手架中在升级到 Webpack4+ 之后,都移除了 DLL 库。以下是 Vue 作者关于移除 DLL 的说法。原创 2023-10-17 22:21:33 · 51 阅读 · 0 评论 -
《二十》Scope Hoisting
ModuleConcatenationPlugin 插件的原理:依赖于 ESModule 模块的静态分析,ModuleConcatenationPlugin 插件会分析出来哪些代码可以进行作用域提升,就会对可以进行作用域提升的代码进行作用域提升。Webpack 默认情况下会有很多的函数作用域,无论是从外开始的代码开始,还是加载一个模块,都需要执行一系列的函数,Scope Hoisting 可以将函数合并到一个模块中来运行。因此可以在 if 判断条件等中进行使用,并且其中的地址也可以是动态的。原创 2023-10-25 17:28:31 · 37 阅读 · 0 评论 -
《十七》对打包后的 JavaScript 文件中的代码进行 Tree Shaking
Tree Shaking 在计算机中表示消除死代码。Tree Shaking 最早源于 LISP,用于消除未调用的代码,后来也被应用于其他的语言,例如 Javacript、Dart 等。Javacript 中的 Tree Shaking 依赖于 ESModule 的静态语法分析,不执行任何代码,就可以明确地知道模块的依赖关系。最早源自打包工具 rollup,rollup 主要用于对 ESModule 相关的代码进行打包。Webpack2 开始内置支持 ESModule 和检测未使用模块的能力;原创 2023-10-28 18:31:03 · 95 阅读 · 0 评论 -
《十八》对打包后的 CSS 文件中的 CSS 代码进行 Tree Shaking
PurgeCSS 只会对打包后的 CSS 文件中的 CSS 代码进行 Tree Shaking,不会对打包后的 HTML 文件、JS 文件中的 CSS 代码进行 Tree Shaking。PurgeCSS 是一个独立的工具,可以单独使用,也可以结合 Webpack 等构建工具中一起使用。由于 PurgeCSS 是对打包后的 CSS 文件中的 CSS 代码进行 Tree Shaking,所以源代码中使用 Less、Sass 等 CSS 预处理器都没有问题。,但是它也被打包到了输出的文件中。原创 2023-10-29 16:18:16 · 136 阅读 · 0 评论 -
《十三》对打包后的 CSS 文件的分离
MiniCssExtractPlugin:是一个后处理插件,可以在 Webpack 打包之后,将 CSS 样式从 bundle 中提取出来生成独立的 CSS 文件,并将其引入到 HTML 中。原创 2023-10-15 11:18:39 · 108 阅读 · 0 评论 -
《十二》对打包后的 JavaScript 文件的分离
默认情况下,所有的代码都会被打包生成到一个文件中,导致文件体积过大,影响项目启动的速度,可以进行代码分离来提高性能。代码分离:Code Splitting。将代码分离到不同的 bundle 中,就可以按需加载或者并行加载这些文件,提高代码的加载性能。原创 2023-10-07 09:11:09 · 413 阅读 · 0 评论 -
《十九》在 Webpack 中对文件进行 HTTP 压缩
HTTP 压缩是一种内置在客户端和服务器之间的改进传输速度和带宽利用率的方式。可以在 Webpack 中进行资源的压缩。HTTP 压缩常见的压缩格式有:compress(历史性原因,已不再推荐使用)、gzip(目前使用比较广泛)、deflate(目前使用也比较多)、br(一种新的开源压缩算法、专门为 HTTP 内容的编码而设计,但目前有些浏览器不支持)。原创 2023-11-01 17:33:43 · 53 阅读 · 0 评论 -
《十六》对打包后的 HTML 文件中的代码进行压缩
使用 HtmlWebpackPlugin 插件来对打包后的 HTML 文件中的代码进行压缩。原创 2023-11-01 22:12:55 · 171 阅读 · 0 评论 -
《二十四》运行 webpack 命令的启动流程
webpack.jswebpack.jsrun()总结来说,执行时,会先去执行,目的就是为了把打包命令中的参数和配置文件中的配置进行合并;然后再真正执行 Webpoack。不同的版本可能会略有差异,此处是和。mac 和 windows 中文件的位置不同,此处是 mac 中的文件路径。原创 2023-11-06 22:05:29 · 232 阅读 · 0 评论 -
《二十五》Webpack 源码解读
Webpack 代码基于。原创 2023-11-09 15:50:13 · 90 阅读 · 0 评论 -
《二十七》自定义 Plugin
在 Webpack 函数的 createCompiler 方法中,注册了所有的插件。在注册插件时,会调用插件函数或者插件对象的 apply 方法。插件方法会接收到 compiler 对象,就可以通过 compiler 对象来注册 Hook 事件。Webpack 中的大部分插件都是一个类,在类中需要实现一个叫做 apply 的方法;Webpack 会调用插件的 apply 方法,并将 compiler 编译器对象作为参数传入;原创 2023-11-25 14:12:25 · 76 阅读 · 0 评论 -
《二十八》React 项目中关于 Webpack 的配置
运行 命令,创建一个 React 项目;运行 命令启动项目。查看项目根目录下的 文件,可以发现,运行 命令实际上就是在运行 命令。在项目根目录的 下可以看到有 , 中的其实只是起一个链接的作用。真正的代码在 中,查看 文件中的 属性,可以发现, 链接到的其实是 文件。在 文件中可以看到,会根据命令中不同的参数去执行 文件夹下的不同的文件。因此,在 React 项目中执行 命令本质上就是在执行 文件。查看 文件,会发现,React 其实也是 启动的本地服务器。 文原创 2023-12-03 13:57:00 · 262 阅读 · 0 评论 -
《三十》模块化打包构建工具 Rollup
基于 Rollup4。Rollup 是一个 JavaScript 的模块化打包工具,可以帮助编译微小的代码到庞大的复杂的代码中(例如一个库或者一个应用程序)。原创 2023-12-06 11:47:12 · 612 阅读 · 0 评论 -
《二十九》自动化构建工具 Gulp
基于 Gulp4。Gulp:是一个工具包,可以帮助自动化和增强工作流。原创 2023-12-04 12:29:07 · 347 阅读 · 0 评论 -
《十五》对打包后的 CSS 文件中的代码进行压缩
CssMinimizerWebpackPlugin 插件只会对打包后的 CSS 文件中的 CSS 代码进行压缩,不会对打包后的 HTML 文件、JS 文件中的 CSS 代码进行压缩。在 Webpack 中可以使用 CssMinimizerWebpackPlugin 插件来实现对 CSS 代码的压缩。CssMinimizerWebpackPlugin 插件是使用 cssnano 工具来压缩 CSS 的。CSS 压缩通常是去除无用的空行空格等,因为很难去修改选择器、属性名、属性值等。原创 2023-10-25 16:40:01 · 175 阅读 · 0 评论 -
《十四》对打包后的 JavaScript 文件中的代码进行压缩和丑化
Terser 是一个可以对 JavaScript 代码进行解释、丑化和压缩的工具集。本身是一个独立的工具,可以单独使用,也可以结合 Webpack 等构建工具一起使用。早期是使用uglify-js来丑化、压缩 JavaScript 代码的,但是目前已经不再维护了,并且不支持 ES6+ 的语法。原创 2023-10-23 22:17:45 · 236 阅读 · 0 评论 -
《十一》配置分离
目前,不管是开发环境的配置信息还是生产环境的配置信息都写在一起,其实可以根据环境进行配置的分离,就可以在打包时采用不同的配置进行打包了。process 是 Node 中的一个全局对象,提供了与当前进程和运行时环境交互的方法和属性。进行赋值,就可以在 Babel 的配置文件中获取到当前的环境了。如果 Babel 的配置文件也需要进行环境分离的话,可以给。,然后在 Webpack 的配置文件中根据不同的环境为。原创 2023-10-05 10:38:26 · 37 阅读 · 0 评论 -
《十》Webpack 中的 source-map
source-map经过 Webpack 打包后的代码运行在浏览器上时,和开发者编写的代码其实是有差异的:例如 ES6 的代码可能被转换成 ES5 的代码;例如代码对应的行号、列号在经过编译后不一致;例如代码进行压缩丑化后会修改编码名称;例如 TypeScript 编写的代码被转换成 JavaScript。当代码报错需要调试时,调试这种转换后不一致的代码是很困难的。source-map。原创 2023-09-13 09:59:24 · 568 阅读 · 0 评论 -
《九》Webpack 中的 watch 模式、DevServer 和 HMR 模块热替换
目前,每次修改源代码之后,都需要手动运行webpack命令重新进行编译打包,并且手动刷新浏览器,才能看到最新的效果。目前,Webpack 中有三种方案来解决这个问题。原创 2023-09-25 11:59:30 · 391 阅读 · 0 评论 -
《三》webpack 中的 Loader
Loader 用于对特定的模块进行加载和转换。默认情况下,如果对一个模块使用了多个 Loader,会从后往前执行其中的 Loader。原创 2023-08-23 23:05:20 · 49 阅读 · 0 评论 -
《四》Webpack 中处理 JavaScript 模块的 Loader 之 babel-loader
Webpack 已经内置了对 JavaScript 模块的处理,默认就可以加载 JS 文件,并且支持模块化开发。但是不是特别完备,并不会对 ES6+ 等代码进行转换。因此需要指定对应的 Loader 来完成想要的功能。:会自动使用 Babel 工具对加载的 JavaScript 文件进行转换。可以用来转换 ES6+ 语法和 JSX 语法。原创 2023-09-17 21:38:24 · 914 阅读 · 0 评论 -
《二十六》自定义 Loader
新建文件,并编写代码。新建文件,并编写自定义 loader 的代码。// 导出一个函数,默认接收三个参数:第一个参数是 Webpack 读取到的要加载的模块的内容,会放到 content 中;第二个参数是 sourcemap 映射;第三个参数是 meta 元数据// 需要返回处理后的结果在中进行配置。// 为了能更明确地看到效果,使用 development 模式,防止 Webpack 进行某些默认的优化module: {rules: [原创 2023-11-20 21:37:05 · 57 阅读 · 0 评论 -
《五》Webpack 中处理 JavaScript 模块的 Loader 之 vue-loader、ts-loader、eslint-loader
新建 文件并编写代码。运行 命令进行打包,会发现报错了,Webpack 不认识 Vue 文件。使用 ::对 Vue 文件进行处理。此时,运行 命令进行打包,会发现打包成功了。:新建 并编写代码。修改 Webpack 打包的入口文件。运行 命令进行打包,会发现报错了,Webpack 不认识 TypeScript 语法。使用 : :会自动去使用 TypeScript Compiler 对匹配到的 TypeScript 进行编译转换。当想要对项目中所有的 TS原创 2023-09-22 16:45:13 · 494 阅读 · 0 评论 -
《七》Webpack 中处理文件的 Loader
04的15分钟在加载文件模块时,webpack 并不知道如何对其进行加载,必须指定对应的 loader 来完成这个功能。原创 2023-09-01 11:44:23 · 65 阅读 · 0 评论 -
《六》Webpack 中处理 CSS 模块的 Loader
也是借助了 less 工具来完成这个功能的,会自动加载 less 的安装包并对其进行使用。,创建了一个 style 标签,将 CSS 文件的样式放到了这个标签中,然后通过页内样式的方式将样式插入到了页面中。在加载 CSS 模块时,webpack 并不知道如何对其进行加载,必须指定对应的 loader 来完成这个功能。后,再去运行 webpack 命令进行打包,会发现报错信息不见了,样式在页面中也生效了。此时,再去运行 webpack 命令进行打包,会发现 less 样式在页面中生效了。原创 2023-08-31 11:28:35 · 163 阅读 · 0 评论 -
《八》Webpack 中的 Plugin
新建文件并编写代码。在配置文件中进行配置。plugins: [// HtmlWebpackPlugin 插件将会根据 template 属性指定的 HTML 文件生成打包后的 HTML 文件})运行webpack命令进行打包,会发现,HtmlWebpackPlugin 插件根据在打包生成的文件夹下自动生成的index.html文件。原创 2023-09-06 22:36:24 · 32 阅读 · 0 评论 -
《二十二》对打包时间和打包体积进行分析
可以使用 SpeedMeasurePlugin 插件来分析每个 Loader 和每个 Plugin 消耗的打包时间。新建index.html和文件,并编写代码。运行webpack命令进行打包,只能看到总的打包时间。。在配置文件中进行配置。再次运行webpack命令进行打包,可以看到总的打包时间和每个 Loader、Plugin 消耗的打包时间。原创 2023-11-02 18:06:57 · 140 阅读 · 0 评论