coding for love-腾讯云开发者社区

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

coding for love

专栏成员

146

文章

145845

阅读量

33

订阅数

6-4~7 Bundler 源码编写

javascript babel.js 编程算法 ecmascript 打包

我们获取到了文本以后，如果直接就拿来分析依赖当然也可以，但是处理起来非常麻烦，效率也低下，尤其是文件内容复杂的时候。所以我们需要将文本转化为 js 可直接操作的对象 ast。前面我们讲到了 babel，它可以将 js 源文件根据我们的需要做内容变更，比如将我们的 es6 编写的源文件转成 es5，其实就是将我们的源文件内容先转为 ast 再去实现后续变更的。它有一个专门负责转换的模块，叫做 baben/parser，前身是 babylon。

2020-06-08

4900

6-3 如何编写一个 plugin

webpack 打包 ide javascript api

插件向第三方开发者提供了 webpack 引擎中完整的能力。使用阶段式的构建回调，开发者可以引入它们自己的行为到 webpack 构建流程中。插件能够钩入(hook) 到在每个编译(compilation)中触发的所有关键事件。在编译的每一步，插件都具备完全访问 compiler 对象的能力，如果情况合适，还可以访问当前 compilation 对象。

2020-06-02

5160

6-1~2 如何编写一个 loader

webpack 打包 javascript actionscript node.js

loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

2020-06-02

5580

5-13 多页面打包配置

webpack html 打包 javascript 网站

前面的配置基本上是基于 spa，不过如果细心的同学可能会发现，之前在 5-5 webapck-dev-server 解决单页应用路由问题一文中已经用到了多页面打包。其实，多页应用很简单，不过是指定多个入口，多个对应输出，以及将输出正确放到 html 中即可。

2020-06-02

4780

5-12 webpack 性能优化（3）

webpack javascript 文件存储打包

及时删除无用的模块，不要引入无用的文件，使用 treeshaking 尽量减少包体。也可以利用 splitchunks 将包文件切割，有效率利用缓存。

2020-06-02

1.3K0

5-8~9 webpack 性能优化（1）

webpack javascript node.js 打包

首先，webpack 版本在迭代更新的过程中会做很多的优化。同样的道理， webpack 打包依赖的 node ，npm ，yarn，也应尽可能使用新版本。

2020-05-18

3670

5-5 webapck-dev-server 解决单页应用路由问题

打包 webpack npm api javascript

对于单页应用 spa，大家应该都不陌生了。本节主要介绍 webpack-dev-server 如何解决 spa 遇到的路由问题。

2020-05-09

8450

5-4 使用 webpack-dev-server 实现请求转发

javascript webpack 打包 api npm

请求转发，其实是使用 webpack-dev-server 的代理功能来实现的，本节为大家介绍 webpack-dev-server 的代理功能和主要使用场景。

2020-05-09

2.4K0

5-2 PWA 的打包配置

网站 webpack 打包 javascript

PWA 是 Progressive Web App 的缩写，即渐进式 Web 应用，目的是在移动端利用提供的标准化框架，在网页应用中实现和原生应用相近的用户体验。

2020-05-04

1.3K0

5-3 TypeScript 的打包配置

https 网络安全 webpack 打包 html

TypeScript 是 JavaScript 的超集，通过类型注解提供编译时的类型检查，能够有效提升代码的可维护性。

2020-05-04

6150

4-12 环境变量的使用

编程算法 webpack 打包 javascript 网站

其实我么之前已经将webpack.config.js 按环境进行去了区分配置，那么在公共配置文件中我们能否知道当前所处的环境，并据此做逻辑区分呢？

2020-03-26

5360

4-11 shimming 的作用

webpack jquery 打包编程算法 gui

webpack 编译器(compiler)能够识别遵循 ES2015 模块语法、CommonJS 或 AMD 规范编写的模块。然而，一些第三方的库(library)可能会引用一些全局依赖（例如 jQuery 中的 $）。这些库也可能创建一些需要被导出的全局变量。这些“不符合规范的模块”就是 shimming 发挥作用的地方。 shimming 另外一个使用场景就是，当你希望 polyfill 浏览器功能以支持更多用户时。在这种情况下，你可能只想要将这些 polyfills 提供给到需要修补(patch)的浏览器（也就是实现按需加载）。

2020-03-23

7870

4-10 webpack 与浏览器缓存（caching）

缓存 ide 打包 https webpack

浏览器在加载资源时，为了提高效率，会使用一定的缓存策略，比如强缓存，与协商缓存，那么如何保证在资源发布以后浏览器能拿到最新的资源而不是缓存呢？

2020-03-20

7180

4-9 css 文件的代码分割

css 打包 webpack html https

本节主要是介绍 MiniCssExtractPlugin 插件，该插件用于将 css 提取成单独的文件。

2020-03-20

6450

4-8 打包分析

webpack 打包 javascript 编程算法

上一节4-3~8 code-splitting，懒加载，预拉取，预加载讲到如何对代码进行 code splitting。那么如何判断我们的代码要进行code splitting 或者对 code splitting 后的效果进行分析呢？这就需要用到一些辅助的打包分析工具。

2020-03-20

3700

4-2 Development 和 Production 模式的区分打包

webpack 打包 https javascript 网络安全

接上节4-1 Tree Shaking 概念详解末尾，我们可以看到，在 mode 进行切换时，webpack.config.js 的配置也是不一样的。这很好理解，开发环境中我们更多地是考虑开发和调试方便，生产环境我们更多考虑性能。但我们总不会每次切换环境的时候，还要手动去更改配置吧。最简单就是保存两份配置，对应不同的环境。

2020-02-24

5940

4-1 Tree Shaking 概念详解

webpack javascript ecmascript 打包

tree shaking 是一个术语，通常用于描述移除 JavaScript 上下文中的未引用代码(dead-code)。它依赖于 ES2015 模块系统中的静态结构特性，例如 import 和 export。这个术语和概念实际上是兴起于 ES2015 模块打包工具 rollup。

2020-02-19

1.1K0

3-13 webpack 实现对 react 框架代码的打包

react babel.js 打包

这一节简单讲述对 React 代码的打包，帮助我们加深理解。如果有需要使用 React 代码的同学可以参考，但是说实话，东西并不多，只是一个简单的入门介绍。另外是一些复习内容，我就不详述了。

2020-02-19

2960

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 使用。

2020-02-19

6410

3-8 使用 WebpackdevServer 提升开发效率

webpack http javascript 打包 npm

webpack-dev-server 是 webpack 集成的开发者服务器，用于帮助开发者快速开发应用程序。

2020-02-19

6170

点击加载更多

社区活动

【纪录片】中国数据库前世今生

穿越半个世纪，探寻中国数据库50年的发展历程

Python精品学习库

代码在线跑，知识轻松学

博客搬家 | 分享价值百万资源包

自行/邀约他人一键搬运博客，速成社区影响力并领取好礼

技术创作特训营·精选知识专栏

往期视频·千货材料·成员作品最新动态