Webpack、Vite、Gulp
文章平均质量分 72
前端构建工具实践
城南花开ze
技术不止
展开
-
Vite 基础之 Vite 高级应用的 rollup 配置文件、rollup 插件、vite 插件、vite 钩子及执行时机和 vite 的 HMR
一、Vite 高级应用的 rollup 配置文件、rollup 插件、vite 插件、vite 钩子及执行时机和 vite 的 HMRVite 是基于 rollup 和 esbuild 实现的。Rollup 是开源类库优先的选择,以 ESM 标准为目标的构建工具,打包基于 tree shaking 功能。通过 npm i -g rollup 命令安装 rollup,rollup.config.js,代码如下:import json from '@rollup/plugin-json';import原创 2022-05-21 15:01:15 · 7551 阅读 · 0 评论 -
Vite 基础之 Vite 高级应用的 HMR 热更新、glob-import 批量导入、预编译、Vite SSR 应用及 SSR 静态站点导出
一、Vite 高级应用的 HMR 热更新、glob-import 批量导入、预编译、Vite SSR 应用及 SSR 静态站点导出Vite 中的热更新,通过 Vite 命令行生成的项目默认都开启了热更新,同时 Vite 中的热更新是根据不同框架去实现的。HMR API,对于 import.meta.hot,通过 vite build 去 build 代码之后,在 build 的 production 的 bundle 里面是没有 hot 代码的,对于发布线上的代码是没有 hot 的需要,需要判断。对于原创 2022-05-21 14:57:28 · 2022 阅读 · 0 评论 -
Vite 基础之 Vite 基础应用的 vite 中使用 Typescript、处理静态资源的方法、集成 eslint 及 prettier、集成 husky 规范和 env 环境变量的设置
一、Vite 基础应用的 vite 中使用 Typescript、处理静态资源的方法、集成 eslint 及 prettier、集成 husky 规范和 env 环境变量的设置在 vite 中,对于 ts 只编译不校验。如果需要对 ts 校验,只能使用 tsc。通过 tsc --noEmit 命令,对 ts 只校验不把编译文件做输出,如下所示:通过 yarn add typescript 命令添加 typescript新增 tsconfig.json,代码如下:{ "compilerOp原创 2022-05-21 14:53:10 · 5414 阅读 · 0 评论 -
Vite 基础之 Vite 的认识、Vite 基础应用的 vite 创建 vue3 项目、vue3 使用 jsx、vite 创建 vue2 项目、vite 创建 react 项目、postcss
一、Vite 的认识Vite 是构建工具,高阶封装,Vite 的特点,如下所示:开发时效率极高开箱即用,功能完备社区丰富,兼容 rollup超高速热重载预设应用和类库打包模式前端类库无关Vite 的目标是使用简单、快、便于扩展。它的类似产品如 Snowpack、WMR、@web/dev-server 等等。Vite 和传统构建工具的区别,如下所示:High Level API不包含自己编译能力完全基于 ESM 加载方式的开发时Vite 减少了很多配置量,减少的工作,原创 2022-05-21 14:47:17 · 1997 阅读 · 0 评论 -
webpack 之 webpack 打包原理的 Tapable、编译流程、模块构建、chunk 生成和 webpack 的 Loader 和插件的处理
一、webpack 打包原理的 Tapable、编译流程、模块构建、chunk 生成Webpack 的本质,Webpack 可以将其理解是一种基于事件流的编程范例,一系列的插件运行。Tapable 是一个类似于 Node.js 的 EventEmitter 的库,主要是控制钩子函数的发布于订阅,控制着 webpack 的插件系统。Tapable 库暴露了很多 Hook 钩子类,为插件提供挂载的钩子。Tapable hooks 类型,如下所示:Hook,所有钩子的后缀,Waterfall,同步方原创 2022-04-10 16:13:20 · 869 阅读 · 0 评论 -
webpack 之 webpack 构建速度和体积优化的图片压缩、tree shaking、polyfill 和 webpack 打包原理的启动过程
一、webpack 构建速度和体积优化的图片压缩、tree shaking、polyfill图片压缩,要求是基于 Node 库的 imagemin 或者 tinypng API,使用时配置 image-webpack-loader,代码如下所示:return { test: /\.(png|svg|jpg|gif|blob)$/, use: [{ loader: 'file-loader', options: { name: `${filename}img原创 2022-04-10 16:09:39 · 835 阅读 · 0 评论 -
webpack 之 webpack 构建速度和体积优化的高版本设置、多进程多实例构建、多进程多实例并行压缩、预编译资源模块、缓存优化速度和缩小构建目标
一、webpack 构建速度和体积优化的高版本设置、多进程多实例构建、多进程多实例并行压缩、预编译资源模块、缓存优化速度和缩小构建目标构建速度优化,使用高版本的 webpack 和 Node.js,构建时间降低了 60% - 98%。使用 webpack4 的优化原因,如下所示:V8 带来的优化,for of 替代 forEach、Map 和 Set 替代 Object、includes 替代 indexOf 等等默认使用更快的 md4 hash 算法webpack AST 可以直接从 loa原创 2022-04-10 11:47:45 · 957 阅读 · 0 评论 -
webpack 之 webpack 构建配置的持续集成、发布 npm、Commit 规范、语义化版本规范和 webpack 构建速度和体积优化分析
一、webpack 构建配置的持续集成、发布 npm、Commit 规范、语义化版本规范持续集成的作用,优点是快速发现错误和防止分支大幅偏离主干。核心措施是代码集成到主干之前,必须通过自动化测试。只要有一个测试用例失败,就不能集成。接入 Travis CI,如下所示:https://travis-ci.org/ 使用 GitHub 账号登录在 https://travis-ci.org/account/repositories 为项目开启项目根目录下新增 .travis.ymltrav原创 2022-04-10 11:41:48 · 429 阅读 · 0 评论 -
webpack 之 webpack 构建配置的构建配置包、功能模块、目录结构、ESLint 规范、冒烟测试、单元测试和测试覆盖率
一、 webpack 构建配置的构建配置包、功能模块、目录结构、ESLint 规范、冒烟测试、单元测试和测试覆盖率构建配置抽离成 npm 包的意义,如下所示:通用性,业务开发者无需关注构建配置,统一团队构建脚本可维护性,构建配置合理的拆分,README 文档、ChangeLog 文档等质量,冒烟测试、单元测试、测试覆盖率、持续集成构建配置管理的可选方案,如下所示:通过多个配置文件管理不同环境的构建,webpack --config 参数进行控制将构建配置设计成一个库,比如:hjs原创 2022-04-10 11:38:15 · 608 阅读 · 0 评论 -
webpack 之 webpack 进阶用法的 SSR 打包、优化构建命令、构建异常和中断处理
一、 webpack 进阶用法的 SSR 打包、优化构建命令、构建异常和中断处理页面打开过程,开始加载 -> HTML 加载成功后开始加载数据 -> 数据加载成功后渲染成功开始、加载图片资源 -> 图片加载成功、页面可交互服务端渲染 SSR 是什么,如下所示:渲染:HTML + CSS + JS + Data -> 渲染后的 HTML服务端:所有模版等资源都存储在服务端,内网机器拉取数据更快,一个 HTML 返回所有的数据浏览器和服务器交互流程,请求开始 ->原创 2022-04-10 11:35:27 · 985 阅读 · 0 评论 -
webpack 之 webpack 进阶用法的提取页面公共资源、treeShaking、scopeHoisting、代码分割、webpack 与 ESLint 结合和webpack 打包组件与基础库
一、 webpack 进阶用法的提取页面公共资源、treeShaking、scopeHoisting、代码分割、webpack与 ESLint 结合和webpack 打包组件与基础库基础库分离,思路是将 react、react-dom 基础包通过 cdn 引入,不打入 bundle 中,方法是使用 html-webpack-externals-plugin。利用 SplitChunksPlugin 进行公共脚本分离,Webpack4 内置的,替代 CommonsChunkPlugin 插件。chunk原创 2022-04-10 11:32:23 · 986 阅读 · 0 评论 -
webpack 之 webpack 进阶用法的自动清理构建目录、自动补齐 CSS3 前缀、自动转换 rem、静态资源内联、多页面打包方案和 source map
一、webpack 进阶用法的自动清理构建目录、自动补齐 CSS3 前缀、自动转换 rem、静态资源内联、多页面打包方案和 source map当前构建时的问题,每次构建的时候不会清理目录,造成构建的输出目录 output 文件越来越多。通过 npm scripts 清理构建目录,如下所示:rm -rf ./dist && webpackrimraf ./dist && webpack自动清理构建目录,避免构建前每次都需要手动删除 dist,使用 clean-原创 2022-04-09 15:31:50 · 415 阅读 · 0 评论 -
webpack 之 webpack 进阶用法的文件监听、热更新、文件指纹设置和代码压缩
一、webpack 进阶用法的文件监听、热更新、文件指纹设置和代码压缩webpack 中的文件监听,文件监听是在发现源码发生变化时,自动重新构建出新的输出文件。webpack开启监听模式,有两种方式,如下所示:启动 webpack 命令时,带上 --watch 参数在配置 webpack.config.js 中设置 watch: truewebpack 中的文件监听使用,唯一缺陷是每次需要手动刷新浏览器,代码如下:"scripts": { "build": "webpack",原创 2022-04-09 15:27:13 · 968 阅读 · 0 评论 -
webpack 之 webpack 认识和 webpack 基础用法的 Entry、Output、Loaders、Plugins、Mode 和资源解析
一、webpack 认识为什么需要构建工具,如下所示:转换 ES6 语法转换 JSXCSS 前缀补全/预处理器压缩混淆图片压缩前端构建演变之路,ant + YUI Tool -> grunt -> fis3、gulp -> rollup、webpack、parcel。为什么选择 webpack,如下所示:社区生态丰富配置灵活和插件化扩展官方更新迭代速度快初识 webpack,如下所示:配置文件名称,webpack 默认配置文件为 webpac原创 2022-04-09 15:23:56 · 740 阅读 · 0 评论 -
webpack 工程实践化总结之常用 loader 和 plugin 总结
一、常用 loaderJavaScript 相关,如下所示:babel-loader:把 ES6 转换成 ES5;script-loader:可以将指定的模块 JavaScript 文件转成纯字符串通过 eval 方式执行;exports-loader:可以导出指定的对象,例如 window.Zepto;ts-loader:把 TypeScript 转换成 JavaScript;imports-loader:将任意三方的对象添加到 window 对象中。样式相关,如下所示:st原创 2020-12-04 01:10:44 · 851 阅读 · 0 评论 -
webpack 工程化实践总结之webpack 核心模块、Compiler 和 Compilation、基本流程和 HMR
一、webpack 核心模块Webpack 工程相当庞大,但 Webpack 本质上是一种事件流机制。通过事件流将各种插件串联起来,最终完成 Webpack 的全流程,而实现事件流机制的核心是 Tapable 模块。Webpack 负责编译的 Compiler 和创建 Bundle 的 Compilation 都是继承自 Tapable。Webpack 核心库 Tapable 的原理和 EventEmitter 类似,但是功能更强大,包括多种类型,通过事件的注册和监听,触发 Webpack 生命周期原创 2020-12-03 00:40:31 · 3981 阅读 · 0 评论 -
webpack 工程化实践总结之 NPM Scripts 及 Webpack 综合配置最佳实践
一、使用 NPM Scripts 来管理开发命令使用 NPM Scripts 来配置开发命令,即 package.json 的 scripts 字段,这样即使我们修改脚本甚至切换 Webpack 到其他的打包工具,对于团队其他成员来说,使用的命令还是不变的,建议的命令包括:npm start:相当于 npm run start,用于开发命令,快速启动本地开发服务;npm run build:用于生产环境打包;其他命令,类似 npm run test/lint 等,根据相关的需要添加即可在原创 2020-11-24 01:26:44 · 691 阅读 · 0 评论 -
webpack 工程化实践总结之性能优化
一、代码体积优化JavaScript 压缩:在 mode=production 下,Webpack 会自动压缩代码,我们可以自定义自己的压缩工具,这里推荐 terser-webpack-plugin,它是 Webpack 官方维护的插件,使用 terser 来压缩 JavaScript 代码。UglifyJS 在压缩 ES5 方面做的很优秀,但是随着 ES6 语法的普及,UglifyJS 在 ES6 代码压缩上做的不够好,所以有了uglify-es 项目,但是之后 uglify-es 项目不在维护了,原创 2020-11-22 15:13:20 · 468 阅读 · 1 评论 -
webpack手摸手学习系列之 webpack5 的认识与变化
一、webpack 5 的介绍及下载webpack 5 通过持久缓存提高构建性能。webpack 5 使用更好的算法和默认值来改善长期缓存。webpack 5 通过更好的树摇和代码生成来改善捆绑包大小。webpack 5 清除处于怪异状态的内部结构,同时在 v4 中实现功能而不引入任何重大更改。webpack 5 通过引入重大更改来为将来的功能做准备,以使我们能够尽可能长时间地使用 v5。webpack 5 的下载可以通过 npm i webpack@next webpack-cli -D 命原创 2020-05-31 13:34:47 · 1683 阅读 · 0 评论 -
webpack手摸手学习系列之配置详解的 entry、output、module、resolve、devServer 和 optimization
一、webpack 配置详解之 entry创建空文件夹,通过 npm init 命令初始化 package.json 文件,通过 npm install webpack webpack-cli -g 命令全局下载 webpack 和 webpack-cli,通过 npm i html-webpack-plugin -D 命令下载 html-webpack-plugin 。创建 src 文件夹,在里面创建 add.js、count.js 和 index.js 文件,代码如下所示:add.jsfun原创 2020-05-31 13:32:36 · 568 阅读 · 0 评论 -
webpack 手摸手学习系列之性能优化的总结
一、webpack 开发环境性能优化优化打包构建速度可以采用 HMR,热模块替换。当一个模块发生变化的时候,如果采用 HMR,只有变化的那个模块才发生打包,其余的模块不打包,是使用缓存。如果未采用 HMR,那么当一个模块发生变化,所有的模块都会打包,构建打包速度是非常慢。所以,使用HMR 能够极大的提升打包速度。优化代码调试可以采用 source-map。source-map 是 提供源代码到构建后代码映射技术,如果构建后代码出错了,通过映射可以追踪源代码错误,类型如下所示:类型原创 2020-05-30 23:29:56 · 201 阅读 · 0 评论 -
webpack 手摸手学习系列之 PWA、多进程打包、externals 和 dll
一、webpack 性能优化之 PWA创建空文件夹,通过 npm init 命令初始化 package.json 文件,通过 npm install webpack webpack-cli -g 命令全局下载 webpack 和 webpack-cli,通过 npm install webpack webpack-cli -D 命令本地下载 webpack 和 webpack-cli,通过 npm i html-webpack-plugin mini-css-extract-plugin optimi原创 2020-05-30 21:52:37 · 348 阅读 · 0 评论 -
webpack 手摸手学习系列之性能优化的缓存、tree-shaking 、code-split 和 预加载以及懒加载
一、webpack 性能优化之缓存创建空文件夹,通过 npm init 命令初始化 package.json 文件,通过 npm install webpack webpack-cli -g 命令全局下载 webpack 和 webpack-cli,通过 npm install webpack webpack-cli -D 命令本地下载 webpack 和 webpack-cli,通过 npm i html-webpack-plugin mini-css-extract-plugin optimize原创 2020-05-30 16:06:10 · 384 阅读 · 0 评论 -
webpack 手摸手学习系列之性能优化的 HRM、source-map 和 oneOf
一、webpack 性能优化之 HRM创建空文件夹,通过 npm init 命令初始化 package.json 文件,通过 npm install webpack webpack-cli -g 命令全局下载 webpack 和 webpack-cli,通过 npm install webpack webpack-cli -D 命令本地下载 webpack 和 webpack-cli,通过 npm i style-loader css-loader -D 命令下载 style-loader 和 css原创 2020-05-30 11:10:22 · 510 阅读 · 0 评论 -
webpack 手摸手学习系列之生产环境基本配置和性能优化配置分析
一、webpack 生产环境基本配置理解创建空文件夹,通过 npm init 命令初始化 package.json 文件,通过 npm install webpack webpack-cli -g 命令全局下载 webpack 和 webpack-cli,通过 npm install webpack webpack-cli -D 命令本地下载 webpack 和 webpack-cli,通过 npm i html-webpack-plugin mini-css-extract-plugin optim原创 2020-05-28 21:57:42 · 244 阅读 · 0 评论 -
webpack 手摸手学习系列之 js 语法检查、js 兼容性 和 压缩 js 以及 html
一、webpack 进行 js 语法检查 eslint创建空文件夹,通过 npm init 命令初始化 package.json 文件,通过 npm install webpack webpack-cli -g 命令全局下载 webpack 和 webpack-cli,通过 npm install webpack webpack-cli -D 命令本地下载 webpack 和 webpack-cli,通过 npm i html-webpack-plugin 命令下载 html-webpack-plug原创 2020-05-27 22:54:21 · 196 阅读 · 0 评论 -
webpack 手摸手学习系列之提取 css、css 兼容和 css 压缩
一、webpack 提取 css 成单独的文件创建空文件夹,通过 npm init 命令初始化 package.json 文件,通过 npm install webpack webpack-cli -g 命令全局下载 webpack 和 webpack-cli,通过 npm install webpack webpack-cli -D 命令本地下载 webpack 和 webpack-cli,通过 npm i style-loader css-loader -D 命令下载 style-loader 和原创 2020-05-26 22:04:05 · 209 阅读 · 0 评论 -
webpack 手摸手学习系列之配置 devServer 和配置开发环境
一、webpack 配置 devServer创建空文件夹,通过 npm init 命令初始化 package.json 文件,通过 npm install webpack webpack-cli -g 命令全局下载 webpack 和 webpack-cli,通过 npm install webpack webpack-cli -D 命令本地下载 webpack 和 webpack-cli,通过 npm i style-loader css-loader -D 命令下载 style-loader 和原创 2020-05-25 21:51:47 · 407 阅读 · 0 评论 -
webpack 手摸手学习系列之打包样式资源、html 资源、图片资源和其它资源
一、webpack 打包样式资源创建空文件夹,通过 npm init 命令初始化 package.json 文件,通过 npm install webpack webpack-cli -g 命令全局下载 webpack 和 webpack-cli,通过 npm install webpack webpack-cli -D 命令本地下载 webpack 和 webpack-cli,通过 npm i style-loader css-loader -D 命令下载 style-loader 和 css-lo原创 2020-05-24 22:44:43 · 272 阅读 · 0 评论 -
webpack 手摸手学习系列之初体验
一、webpack 的介绍webpack 是一种前端资源构建工具,一个静态模块打包器(module bundler),前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。它将根据模块的依赖关系进行静态分析,打包生成对应的静态资源(bundle)。webpack 分为 Entry、Output、Loader、Plugins和 Mode。Entry:入口(Entry)指示 webpack 以哪个文件为入口起点开始打包,分析构建内部依赖图。Output:原创 2020-05-24 12:34:23 · 193 阅读 · 0 评论 -
webpack 的常见面试题
一、什么是webpack,和 grunt 和 gulp 有什么不同答案: webpack 是一个模块打包器,它可以递归的打包项目中的所有模块,最终生成几个打包后的文件。它和其它的工具最大的不同在于它支持 code-splitting、模块化(AMD, ESM, CommonJS)、全局分析等。二、什么是 bundle,什么是 chunk,什么是 module答案: bundle 是 webpack 打包出来的文件, chunk 是指 webpack 在进行模块的依赖分析的时候,代码分割出来的代码块,原创 2020-05-24 10:54:12 · 1000 阅读 · 0 评论 -
webpack 深入浅出分析之style-loader、css-loader、配置sass与less
一、webpack 打包 style-loader创建一个空文件夹,通过 npm init 初始化创建 package.json 文件,通过 npm install webpack --save-dev 命令下载 webpack,通过 npm install style-loader css-loader --save-dev 命令下载 style-loader 和 css-loader。创建 css 文件夹,在里面创建 base.css 和 common.css,代码如下所示:base原创 2020-05-24 09:56:48 · 842 阅读 · 0 评论 -
webpack 深入浅出分析之打包公共代码、代码分割和懒加载
一、webpack 打包公共代码创建一个空文件夹,通过 npm init 初始化创建 package.json 文件,通过 npm install webpack --save-dev 命令下载 webpack。创建 src 文件夹,里面创建 moduleA.js、subPageA.js和 subPageB.js,moduleA.js作为subPageA.js和 subPageB.js的公共组件。创建 pageA.js 和 pageB.js 文件,subPageA.js和 subPageB.js原创 2020-05-23 19:27:27 · 416 阅读 · 0 评论 -
webpack 深入浅出分析之打包 JS、ES6 和 Typescript
一、webpack 打包 JS 文件通过 npm install webpack 命令可以下载 webpack,通过 npm install webpack-cli -g 命令下载 webpack-cli。创建一个空文件,在里面创建 sum.js 文件,采用ES6 module 的规范,进行求和,代码如下所示:export default function (a, b) { return a + b}在里面创建 minus.js 文件,采用 CommonJS 的规范,进行求原创 2020-05-23 17:06:06 · 539 阅读 · 0 评论 -
webpack 基础概念理解
一、webpack 基础概念理解本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。 webpack 支持 AMD (RequireJS)、ES Modules 和CommonJS 等模式,如图所示:webpack 在 V1 时,功能主要为 编译、打包原创 2020-05-23 11:14:25 · 354 阅读 · 0 评论 -
Gulp与Less的理解认识
Gulp与Less一、Gulp的概念自动化构建工具,可以通过gulp对我们的代码进行全自动的编译。可以实现代码的自动压缩、编译、实时监测等功能二、特点任务化基于流(数据流io:input/output)操作 整个操作都是基于数据流进行操作具备属于gulp的内存,所有的操作全部在gulp的内存当中对应着输入流和输出流会,将数据通过src方法输入,通过dest方法输出简易的...原创 2019-11-23 10:44:35 · 322 阅读 · 0 评论