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

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

coding for love

专栏作者

146

文章

139940

阅读量

33

订阅数

6-3 如何编写一个 plugin

webpack 打包 ide javascript api

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

2020-06-02

4810

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

webpack 打包 javascript actionscript node.js

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

2020-06-02

5310

5-13 多页面打包配置

webpack html 打包 javascript 网站

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

2020-06-02

4590

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

3450

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

7890

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

javascript webpack 打包 api npm

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

2020-05-09

2.2K0

5-2 PWA 的打包配置

网站 webpack 打包 javascript

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

2020-05-04

1.2K0

5-3 TypeScript 的打包配置

https 网络安全 webpack 打包 html

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

2020-05-04

5880

5-1 library 的打包

我们开发一个库，供别人使用 npm 下载使用时，为了保证兼容性和体积，应该将其打包。本节介绍如何打包一个库进行发布。

2020-04-23

6030

4-12 环境变量的使用

编程算法 webpack 打包 javascript 网站

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

2020-03-26

5070

4-11 shimming 的作用

webpack jquery 打包编程算法 gui

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

2020-03-23

7460

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

缓存 ide 打包 https webpack

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

2020-03-20

6960

4-9 css 文件的代码分割

css 打包 webpack html https

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

2020-03-20

6210

4-8 打包分析

webpack 打包 javascript 编程算法

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

2020-03-20

3560

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

5350

4-1 Tree Shaking 概念详解

webpack javascript ecmascript 打包

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

2020-02-19

9870

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

6120

点击加载更多

社区活动

腾讯技术创作狂欢月

“码”上创作 21 天，分 10000 元奖品池！

Python精品学习库

代码在线跑，知识轻松学

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

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

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

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