腾讯云
开发者社区
文档
建议反馈
控制台
登录/注册
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
搜索
搜索
关闭
发布
首页
学习
活动
专区
工具
TVP
最新优惠活动
返回腾讯云官网
coding for love
专栏成员
举报
146
文章
145807
阅读量
33
订阅数
订阅专栏
申请加入专栏
全部文章(146)
其他(70)
webpack(33)
打包(32)
javascript(28)
https(13)
html(12)
编程算法(9)
node.js(8)
css(8)
网络安全(8)
npm(7)
ecmascript(5)
网站(5)
image(5)
png(5)
java(4)
github(4)
缓存(4)
json(3)
api(3)
腾讯云测试服务(3)
babel.js(3)
开源(3)
面向对象编程(3)
jquery(2)
typescript(2)
ide(2)
git(2)
微信(2)
ios(1)
php(1)
actionscript(1)
vue.js(1)
react(1)
xml(1)
linux(1)
unix(1)
apache(1)
文件存储(1)
mongodb(1)
人工智能(1)
eslint(1)
express(1)
http(1)
sass(1)
容器(1)
lodash(1)
ssh(1)
gui(1)
单元测试(1)
小程序(1)
adapter(1)
builder(1)
case(1)
constructor(1)
model(1)
target(1)
编程(1)
单例模式(1)
服务器(1)
接口(1)
模块化(1)
设计模式(1)
原型链(1)
作用域(1)
搜索文章
搜索
搜索
关闭
6-4~7 Bundler 源码编写
javascript
babel.js
编程算法
ecmascript
打包
我们获取到了文本以后,如果直接就拿来分析依赖当然也可以,但是处理起来非常麻烦,效率也低下,尤其是文件内容复杂的时候。所以我们需要将文本转化为 js 可直接操作的对象 ast。 前面我们讲到了 babel,它可以将 js 源文件根据我们的需要做内容变更,比如将我们的 es6 编写的源文件转成 es5,其实就是将我们的源文件内容先转为 ast 再去实现后续变更的。它有一个专门负责转换的模块,叫做 baben/parser,前身是 babylon。
love丁酥酥
2020-06-08
490
0
6-3 如何编写一个 plugin
webpack
打包
ide
javascript
api
插件向第三方开发者提供了 webpack 引擎中完整的能力。使用阶段式的构建回调,开发者可以引入它们自己的行为到 webpack 构建流程中。插件能够 钩入(hook) 到在每个编译(compilation)中触发的所有关键事件。在编译的每一步,插件都具备完全访问 compiler 对象的能力,如果情况合适,还可以访问当前 compilation 对象。
love丁酥酥
2020-06-02
516
0
6-1~2 如何编写一个 loader
webpack
打包
javascript
actionscript
node.js
loader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解 JavaScript)。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块,然后你就可以利用 webpack 的打包能力,对它们进行处理。
love丁酥酥
2020-06-02
558
0
5-13 多页面打包配置
webpack
html
打包
javascript
网站
前面的配置基本上是基于 spa,不过如果细心的同学可能会发现,之前在 5-5 webapck-dev-server 解决单页应用路由问题 一文中已经用到了多页面打包。其实,多页应用很简单,不过是指定多个入口,多个对应输出,以及将输出正确放到 html 中即可。
love丁酥酥
2020-06-02
478
0
5-12 webpack 性能优化(3)
webpack
javascript
文件存储
打包
及时删除无用的模块,不要引入无用的文件,使用 treeshaking 尽量减少包体。也可以利用 splitchunks 将包文件切割,有效率利用缓存。
love丁酥酥
2020-06-02
1.3K
0
5-8~9 webpack 性能优化(1)
webpack
javascript
node.js
打包
首先,webpack 版本在迭代更新的过程中会做很多的优化。同样的道理, webpack 打包依赖的 node ,npm ,yarn,也应尽可能使用新版本。
love丁酥酥
2020-05-18
366
0
5-6~7 eslint 在 webpack 中的配置
eslint
https
网络安全
webpack
javascript
eslint 是一个开源的 js 代码检查工具,初衷是为了让程序员可以创建自己的检测规则。实际生产中,团队内往往会制订一套统一的标准,让整个团队的编码风格达到一致。 eslint 其实与 webpack 没有任何关系,两者并不互相依赖,甚至一般情况下我们并不会在 webpack 中进行 eslint 的配置。这里我们主要是介绍一下 eslint 是如何进行配置和使用的。
love丁酥酥
2020-05-18
1.4K
0
5-5 webapck-dev-server 解决单页应用路由问题
打包
webpack
npm
api
javascript
对于单页应用 spa,大家应该都不陌生了。本节主要介绍 webpack-dev-server 如何解决 spa 遇到的路由问题。
love丁酥酥
2020-05-09
845
0
5-4 使用 webpack-dev-server 实现请求转发
javascript
webpack
打包
api
npm
请求转发,其实是使用 webpack-dev-server 的代理功能来实现的,本节为大家介绍 webpack-dev-server 的代理功能和主要使用场景。
love丁酥酥
2020-05-09
2.4K
0
5-2 PWA 的打包配置
网站
webpack
打包
javascript
PWA 是 Progressive Web App 的缩写,即渐进式 Web 应用,目的是在移动端利用提供的标准化框架,在网页应用中实现和原生应用相近的用户体验。
love丁酥酥
2020-05-04
1.3K
0
4-12 环境变量的使用
编程算法
webpack
打包
javascript
网站
其实我么之前已经将webpack.config.js 按环境进行去了区分配置,那么在公共配置文件中我们能否知道当前所处的环境,并据此做逻辑区分呢?
love丁酥酥
2020-03-26
535
0
4-8 打包分析
webpack
打包
javascript
编程算法
上一节4-3~8 code-splitting,懒加载,预拉取,预加载 讲到如何对代码进行 code splitting。那么如何判断我们的代码要进行code splitting 或者对 code splitting 后的效果进行分析呢?这就需要用到一些辅助的打包分析工具。
love丁酥酥
2020-03-20
370
0
4-3~8 code-splitting,懒加载,预拉取,预加载
webpack
缓存
jquery
lodash
javascript
代码分离是 webpack 中最引人注目的特性之一。此特性能够把代码分离到不同的 bundle 中,然后可以按需加载或并行加载这些文件。代码分离可以用于获取更小的 bundle,以及控制资源加载优先级,如果使用合理,会极大影响加载时间。
love丁酥酥
2020-02-25
1.5K
0
4-2 Development 和 Production 模式的区分打包
webpack
打包
https
javascript
网络安全
接上节4-1 Tree Shaking 概念详解末尾,我们可以看到,在 mode 进行切换时,webpack.config.js 的配置也是不一样的。这很好理解,开发环境中我们更多地是考虑开发和调试方便,生产环境我们更多考虑性能。但我们总不会每次切换环境的时候,还要手动去更改配置吧。最简单就是保存两份配置,对应不同的环境。
love丁酥酥
2020-02-24
594
0
4-1 Tree Shaking 概念详解
webpack
javascript
ecmascript
打包
tree shaking 是一个术语,通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块系统中的静态结构特性,例如 import 和 export。这个术语和概念实际上是兴起于 ES2015 模块打包工具 rollup。
love丁酥酥
2020-02-19
1.1K
0
3-11-12 使用 babel 处理 es6 语法
webpack
打包
babel.js
javascript
ecmascript
关于 es6 的内容想必大家都已不再陌生,因为 es10 都已经出来了,只要不是太老的浏览器版本基本都支持 es6 的大多数特性了。可以看这里:http://kangax.github.io/compat-table/es6/ 当然,要保证 es6 或者 es7 的语法进行源码编写后完全可用,我们可以用 babel 将其转成 es5。Babel 是一个工具链,主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中。 关于 babel 的使用方法和原理都可以单列一个系列了,在此我们只讲述 babel 如何结合 webpack 使用。
love丁酥酥
2020-02-19
641
0
3-9-10 Hot Module Replacement 热模块更新
css
webpack
https
javascript
编程算法
模块热替换(HMR - Hot Module Replacement)功能会在应用程序运行过程中替换、添加或删除模块,而无需重新加载整个页面。
love丁酥酥
2020-02-19
651
0
3-8 使用 WebpackdevServer 提升开发效率
webpack
http
javascript
打包
npm
webpack-dev-server 是 webpack 集成的开发者服务器,用于帮助开发者快速开发应用程序。
love丁酥酥
2020-02-19
617
0
3-7 sourceMap的配置
打包
编程算法
javascript
sourceMap,顾名思义,就是对源文件的映射。比如打包压缩后的代码对应源文件中的哪一行代码,这能够极大地方便开发者的调试。
love丁酥酥
2019-08-20
1.3K
0
3-6 Entry 与 Output的基础配置
打包
webpack
javascript
https
网络安全
entry与output,顾名思义,就是打包的入口与输出,其实之前我们已经接触了这两个参数,下面详细介绍一下这两个参数的配置。
love丁酥酥
2019-07-18
517
0
点击加载更多
社区活动
【纪录片】中国数据库前世今生
穿越半个世纪,探寻中国数据库50年的发展历程
立即查看
Python精品学习库
代码在线跑,知识轻松学
立即查看
博客搬家 | 分享价值百万资源包
自行/邀约他人一键搬运博客,速成社区影响力并领取好礼
立即体验
技术创作特训营·精选知识专栏
往期视频·千货材料·成员作品 最新动态
立即查看
领券
问题归档
专栏文章
快讯文章归档
关键词归档
开发者手册归档
开发者手册 Section 归档