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

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

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

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

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

基本Loader

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

1
2
3
module.exports = function(source, sourceMap, meta) {

}

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

限定Webpack处理文件范围

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

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

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

同构应用

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

  • 不利于SEO,浏览器环境代码是在客户端渲染,大部分爬虫都只能爬到一个空白的入口文件

Javascript事件系统

本文内容

  • 事件基础

Webpack4不求人系列(1)

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

深入浅出ES6的迭代器

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

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

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

深入浅出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

ES6的Set类型

本文内容

  • Set的基本使用

ES6的Map类型

本文内容

  • Map的基本使用
Your browser is out-of-date!

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

×