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

2020年3月18日 · 567 字 · 3 分钟

Webpack通过Loader完成模块的转换工作，让“一切皆模块”成为可能。Plugin机制则让其更加灵活，可以在Webpack生命周期中调用钩子完成各种任务，包括修改输出资源、输出目录等等。 今天我们一起来学习如何编写Webpack插件。 构建流程 在编写插件之前，还需要了解一下Webpack的构建流程，以便在合适的时机插入合适的插件逻辑。Webpack的基本构建流程如下：

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

2020年3月11日 · 427 字 · 3 分钟

在前面的内容中，我们学习了Webpack的基本知识、常用脚手架和性能优化，虽然说大部分的开发场景社区已经又成熟的模块给我们使用，但是遇到特殊情况还是需要自己有独立开发的能力，因此今天我们一起来学习如何编写自定义Loader。 基本Loader Webpack中loader是一个CommonJs风格的函数，接收输入的源码，通过同步或异步的方式替换源码后进行输出。 module.exports = function(source, sourceMap, meta) { } source是输入的内容 sourceMap是可选的 meta是模块的元数据，也是可选的 需要注意的是，该导出函数必须使用function，不能使用箭头函数，因为loader编写过程中会经常使用到this访问选项和其他方法。

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

2020年3月6日 · 335 字 · 2 分钟

限定Webpack处理文件范围 项目比较小的情况下Webpack的性能问题几乎可以忽略，但是一旦项目复杂度上升，Webpack会有额外的性能损失需要我们进行优化。 通过前面内容的学习我们可以知道Webpack主要干下面这些事情： 通过entry指定的入口脚本进行依赖解析。 找到文件后通过配置的loader对其进行处理。 因此，我们可以从这方面入手进行优化，减少Webpack搜索文件的范围，减少不必要的处理。

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

2020年3月2日 · 658 字 · 4 分钟

同构应用 使用同一份应用代码，同时提供浏览器环境和服务器环境下的应用，解决传统浏览器单页应用的两个顽固问题： 不利于SEO，浏览器环境代码是在客户端渲染，大部分爬虫都只能爬到一个空白的入口文件 代码在浏览器渲染，低端机可能会卡顿 接下来我们一起从零开始搭建基于Webpack的React同构应用脚手架。

Webpack4不求人系列(1)

2019年12月19日 · 817 字 · 4 分钟

Webpack是一个现在Javascript应用程序的模块化打包器，在Webpack中JS/CSS/图片等资源都被视为JS模块，简化了编程。当Webpack构建时，会递归形成一个模块依赖关系图，然后将所有的模块打包为一个或多个bundle。 本文内容 简介 常用loader && plugin 传统网站的webpack配置 简介 要系统地学习Webpack，需要先了解Webpack的四个核心概念:

vue webpack重写cookie路径

2019年7月8日 · 66 字 · 1 分钟

webpack提供的反向代理服务器在开发阶段非常方便，几行简单的代码配置就可以使用反向代理功能，包括路径重写、cookie处理等。 项目开发阶段使用的API路径是 /admin，部署到线上是/，所以在开发过程中需要在proxyTable进行反向代理配置，将路径重写掉，路径重写代码如下(config/index.js): proxyTable: { '/admin': { target: 'http://127.