腾讯云开发者社区-腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

coding for love

专栏作者

146

文章

140818

阅读量

33

订阅数

6-4~7 Bundler 源码编写

javascript babel.js 编程算法 ecmascript 打包

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

2020-06-08

4690

6-3 如何编写一个 plugin

webpack 打包 ide javascript api

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

2020-06-02

4840

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

webpack 打包 javascript actionscript node.js

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

2020-06-02

5340

5-13 多页面打包配置

webpack html 打包 javascript 网站

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

2020-06-02

4630

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

3460

5-6~7 eslint 在 webpack 中的配置

eslint https 网络安全 webpack javascript

eslint 是一个开源的 js 代码检查工具，初衷是为了让程序员可以创建自己的检测规则。实际生产中，团队内往往会制订一套统一的标准，让整个团队的编码风格达到一致。 eslint 其实与 webpack 没有任何关系，两者并不互相依赖，甚至一般情况下我们并不会在 webpack 中进行 eslint 的配置。这里我们主要是介绍一下 eslint 是如何进行配置和使用的。

2020-05-18

1.3K0

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

打包 webpack npm api javascript

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

2020-05-09

8000

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

javascript webpack 打包 api npm

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

2020-05-09

2.3K0

5-2 PWA 的打包配置

网站 webpack 打包 javascript

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

2020-05-04

1.2K0

4-12 环境变量的使用

编程算法 webpack 打包 javascript 网站

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

2020-03-26

5110

4-8 打包分析

webpack 打包 javascript 编程算法

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

2020-03-20

3570

4-3~8 code-splitting，懒加载，预拉取，预加载

webpack 缓存 jquery lodash javascript

代码分离是 webpack 中最引人注目的特性之一。此特性能够把代码分离到不同的 bundle 中，然后可以按需加载或并行加载这些文件。代码分离可以用于获取更小的 bundle，以及控制资源加载优先级，如果使用合理，会极大影响加载时间。

2020-02-25

1.5K0

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

webpack 打包 https javascript 网络安全

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

2020-02-24

5420

4-1 Tree Shaking 概念详解

webpack javascript ecmascript 打包

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

2020-02-19

9980

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

6180

3-9-10 Hot Module Replacement 热模块更新

css webpack https javascript 编程算法

模块热替换(HMR - Hot Module Replacement)功能会在应用程序运行过程中替换、添加或删除模块，而无需重新加载整个页面。

2020-02-19

6240

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

webpack http javascript 打包 npm

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

2020-02-19

5930

3-7 sourceMap的配置

打包编程算法 javascript

sourceMap，顾名思义，就是对源文件的映射。比如打包压缩后的代码对应源文件中的哪一行代码，这能够极大地方便开发者的调试。

2019-08-20

1.2K0

3-6 Entry 与 Output的基础配置

打包 webpack javascript https 网络安全

entry与output，顾名思义，就是打包的入口与输出，其实之前我们已经接触了这两个参数，下面详细介绍一下这两个参数的配置。

2019-07-18

5040

点击加载更多

社区活动

RAG七天入门训练营

鹅厂大牛手把手带你上手实战

Python精品学习库

代码在线跑，知识轻松学

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

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

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

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