frontend / javascript
15 分钟 读完 (大约 2200 个字)

Webpack4不求人(5)——编写自定义插件

Webpack通过Loader完成模块的转换工作，让“一切皆模块”成为可能。Plugin机制则让其更加灵活，可以在Webpack生命周期中调用钩子完成各种任务，包括修改输出资源、输出目录等等。

今天我们一起来学习如何编写Webpack插件。

frontend / javascript
10 分钟 读完 (大约 1428 个字)

Webpack4不求人(4)——编写自定义Loader

在前面的内容中，我们学习了Webpack的基本知识、常用脚手架和性能优化，虽然说大部分的开发场景社区已经又成熟的模块给我们使用，但是遇到特殊情况还是需要自己有独立开发的能力，因此今天我们一起来学习如何编写自定义Loader。

基本Loader

Webpack中loader是一个CommonJs风格的函数，接收输入的源码，通过同步或异步的方式替换源码后进行输出。

1
2
3
module.exports = function(source, sourceMap, meta) {
  
}
frontend / javascript
15 分钟 读完 (大约 2260 个字)

Webpack4不求人(3) ——性能优化

限定Webpack处理文件范围

项目比较小的情况下Webpack的性能问题几乎可以忽略，但是一旦项目复杂度上升，Webpack会有额外的性能损失需要我们进行优化。

通过前面内容的学习我们可以知道Webpack主要干下面这些事情：

frontend / javascript
9 分钟 读完 (大约 1297 个字)

Webpack4不求人(2) ——手把手搭建TypeScript+React16+ReactRouter5同构应用脚手架

同构应用

使用同一份应用代码，同时提供浏览器环境和服务器环境下的应用，解决传统浏览器单页应用的两个顽固问题：

  • 不利于SEO，浏览器环境代码是在客户端渲染，大部分爬虫都只能爬到一个空白的入口文件
frontend / javascript
17 分钟 读完 (大约 2558 个字)

Javascript事件系统

本文内容

  • 事件基础
frontend / javascript
21 分钟 读完 (大约 3206 个字)

Webpack4不求人系列(1)

Webpack是一个现在Javascript应用程序的模块化打包器，在Webpack中JS/CSS/图片等资源都被视为JS模块，简化了编程。当Webpack构建时，会递归形成一个模块依赖关系图，然后将所有的模块打包为一个或多个bundle。

frontend / javascript
4 分钟 读完 (大约 622 个字)

深入浅出ES6的迭代器

迭代器是ES2015中新增的规范，与之相关的for…of也是ES2015新增的。

本文来深入研究一下迭代器是什么，以及迭代器能够干什么？

或许你对for … of的执行还不了解，比如什么情况下可以使用for … of去遍历对象，什么情况下会报错等等，这篇文章应该能帮到你。

frontend / javascript
14 分钟 读完 (大约 2128 个字)

深入浅出ES6的标准内置对象Proxy

Proxy是ES6规范定义的标准内置对象，可以对目标对象的读取、函数调用等操作进行拦截。一般来说，通过Proxy可以让目标对象“可控”，比如是否能调用对象的某个方法，能否往对象添加属性等等。

1
2
3
4
5
6
7
8
9
10
11
12
const originalObj = {
    name: 'xialei'
};
const publicObj = new Proxy(originalObj, {
    set(target, prop, value) {
        // 将属性值转化为大写
        target[prop] = value.toString().toUpperCase();
    }
});

publicObj.name = 'xialei';
console.log(publicObj.name); // XIALEI
frontend / javascript
4 分钟 读完 (大约 541 个字)

ES6的Set类型

本文内容

  • Set的基本使用
frontend / javascript
8 分钟 读完 (大约 1270 个字)

ES6的Map类型

本文内容

  • Map的基本使用
关注我

出版书籍

微信公众号

欢迎关注我的公众号
学习最新、最热的JS/TS知识！

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×