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,浏览器环境代码是在客户端渲染,大部分爬虫都只能爬到一个空白的入口文件

Webpack4不求人系列(1)

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

vue webpack重写cookie路径

webpack提供的反向代理服务器在开发阶段非常方便,几行简单的代码配置就可以使用反向代理功能,包括路径重写、cookie处理等。

项目开发阶段使用的API路径是 /admin,部署到线上是/,所以在开发过程中需要在proxyTable进行反向代理配置,将路径重写掉,路径重写代码如下(config/index.js):

1
2
3
4
5
6
7
8
9
proxyTable: {
'/admin': {
target: 'http://127.0.0.1:8080',
changeOrigin: true,
pathRewrite: {
'^/admin': '/admin2'
},
}
}
Your browser is out-of-date!

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

×