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

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

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

构建流程

在编写插件之前,还需要了解一下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,浏览器环境代码是在客户端渲染,大部分爬虫都只能爬到一个空白的入口文件

Shell脚本快速入门(2)

今天我们来学习Shell的运算符和流程控制。

运算符

Shell和其他编程语言一样支持多种运算符,包括:

Shell脚本快速入门(1)

Shell 是一个用 C 语言编写的程序,用户可以通过Shell脚本语言来进行程序开发。与其他脚本语言不同,Shell脚本所需的解释器一般是内置在操作系统的,而像Node.js、PHP等脚本语言需要手动安装解释器程序才可以。

接下来将和大家一起来学习Shell脚本编程。

Shell解释器

Shell解释器种类众多,笔者的电脑上内置以下Shell:

Java中加载文件的几种方式

在Java程序中加载外部文件有多中方式,每种方式也存在区别,本文将理清这些加载方式之间的区别。

文件IO方式

1
2
3
4
5
6
7
8
9
10
11
package org.xialei.example.resource;

import java.io.File;
import java.io.IOException;

public class Main {
public static void main(String[] args) throws IOException {
File file = new File("app.properties");
System.out.println(file.getAbsolutePath());
}
}

常见的读取方式,使用该方式读取文件时规则如下:

kafka二进制协议简要分析

最近分享了《应用层私有协议的设计和实战》,对应用层私有协议设计做了一些介绍,同时也对协议设计中常用的数据类型做了比较形象的讲解,今天我们来研究一下kafka的二进制协议。

数据类型

kafka二进制协议定义了许多的数据类型,包含常用的数字、字符串,也包含了数组等类型。

本文主要讨论不可变长数据类型,可变长度(如Google Protocol Buffers)不在讨论范围内。

Javascript事件系统

本文内容

  • 事件基础

Webpack4不求人系列(1)

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

Your browser is out-of-date!

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

×