#webpack

webpack 是一个模块打包器。webpack 处理带有依赖关系的模块,生成一系列表示这些模块的静态资源。

Webpack5 性能优化 - 优化产出代码

文渊同学

在生产环境下(webpack.prod.js),将小于某个大小的图片(例如 5kb)转成 base64 格式产出,减少一个网络请求。如下代码所示:

9820

Webpack5 性能优化 - 优化构建速度

文渊同学

例如我们在项目中引入了 Moment.js 这个日期处理类库 import moment from 'moment',该库有多国语言支持,默认会引入所有语言的 ...

12320

Webpack5 高级配置

文渊同学

懒加载就是引入动态数据,webpack 本身支持这种机制,所以不需要额外配置,只需要借助 import() 语法来引入 JS 文件。这种语法和 Vue 和 Re...

7820

Webpack5 基本配置

文渊同学

上图为 webpack 官网上的图片,一切文件:JavaScript、CSS、SCSS、图片、模板,在 webpack 眼中都是一个个模块,这样的好处是能清晰的...

8820

webpack 学习笔记系列08-HMR热更新

CS逍遥剑仙

腾讯 · 运营开发工程师 (已认证)

HMR - Hot Module Replacement,当 webpack 开启 HMR 功能后,代码修改时 webpack 会重新打包,并将修改后的代码发送...

533210

webpack 学习笔记系列07-工作原理

CS逍遥剑仙

腾讯 · 运营开发工程师 (已认证)

webpack 的产出代码是根据不同配置,执行不同操作,拼接模板代码而成的,对于普通打包,webpack 的打包产物是一个 立即执行函数表达式 (IIFE),函...

597260

webpack 学习笔记系列06-打包优化

CS逍遥剑仙

腾讯 · 运营开发工程师 (已认证)

可选值:async(默认) | initial | all(推荐),针对下面的 a.js 和 b.js

573190

配置多入口 Webpack 热更新失效?

发声的沉默者

Webpack 对于现代前端开发者,想必是相当熟悉了,在很多项目中,应用非常广泛,而 webpack-dev-server,相信大家应该也都接触过。最近,作者在...

12730

Webpack 如何配置热更新

发声的沉默者

是指 Hot Module Replacement,缩写为 HMR。对于你需要更新的模块,进行一个"热"替换,所谓的热替换是指在不需要刷新页面的情况下,对某个改...

9800

Webpack4 性能优化实践

发声的沉默者

在使用 Webpack 时,如果不注意性能优化,可能会产生性能问题,会导致在开发体验上不是非常丝滑,性能问题主要是编译速度慢,打包体积过大,因此性能优化也主要从...

7700

[ webpack ] webpack 的 loader 和 plugin 开发的方法

GavinUI

交互科技 · 驻腾讯前端开发 (已认证)

loader 主要的是处理静态资源,而 plugins 是可以贯穿在整个 webpack 构建的周期中,他能做到 loader 做不到的事情。但是,loader...

21690

前端模块打包之Webpack

全栈开发Dream

webpack是前端模块化打包工具,它把一切都看成模块,比如css、js、图片文件等都可以看成模块,再通过一些loader(加载器)和plugin(插件)对资源...

19180

[ Webpack ] 实现一个 mini 版的 webpack

GavinUI

交互科技 · 驻腾讯前端开发 (已认证)

Vite 的发布是不是意味着 webpack 的终结?当然不是, webpack 存在这么多年是解决了不少奇奇怪怪的问题而且也适合处理那些深度复杂的场景,这一点...

15550

[ webpack ] webpack 构建基本参数配置

GavinUI

交互科技 · 驻腾讯前端开发 (已认证)

每个前端项目或者说每一个HTML页面,都有着不同的静态资源,其中js文件有相互之间又有着不同的依赖,img图片需要进行图片压缩合并,css文件有需要进行浏览器样...

15960

[ webpack ] cross-env 模块的作用

GavinUI

交互科技 · 驻腾讯前端开发 (已认证)

大多数情况下,当我们使用类似于 NODE_ENV = production 这样子的命令来设置环境变量的时候,往往是会报错的。因为windows 和 其他 un...

17540

Webpack 基石 tapable 揭秘

2020labs小助手

vivo · 技术编辑 (已认证)

Webpack 基于 tapable 构建了其复杂庞大的流程管理系统,基于 tapable 的架构不仅解耦了流程节点和流程的具体实现,还保证了 Webpack ...

8640

tapable钩子函数介绍

挥刀北上

webpack的的实现是基于tapable,来看一下tabable的各个钩子函数的使用。

11240

前端模块化之webpack的初识与使用

全栈加加

通过上面,我们大致学习了webpack的基本使用方法,随着webpack技术不断得更新迭代,我们在网上可能会看得很多webpack相关的技术,但是其实有些版本早...

14910

webpack 学习笔记系列05-devserver

CS逍遥剑仙

腾讯 · 运营开发工程师 (已认证)

webpack-dev-server 是一个小型的 express 服务器,它通过 express 的中间件 webpack-dev-middleware 和 ...

563130

webpack 学习笔记系列04-资源处理优化

CS逍遥剑仙

腾讯 · 运营开发工程师 (已认证)

在 webpack 4 的 production 模式下已做了大量通用的优化配置,如 Tree-Shaking、Scope Hoisting 都默认开启,使用的...

423120

扫码关注云+社区

领取腾讯云代金券