Why Webpack Loader Read From Right To Left
栏目: JavaScript · 发布时间: 7年前
内容简介：layout: post title: 为什么 Webpack Loader 解析顺序从右向左 category: 技术 tags: webpack, loader, javascript description: 为什么 Webpack Loader 顺序从右向左 —在 Webpack 配置文件中，通常需要配置不同的要解决以上疑问，需要明确2个概念。
layout: post title: 为什么 Webpack Loader 解析顺序从右向左 category: 技术 tags: webpack, loader, javascript description: 为什么 Webpack Loader 顺序从右向左 —
问题
在 Webpack 配置文件中，通常需要配置不同的 loader
解析对应的文件，比如 less
文件，通常需要按照如下顺序配置 style-loader、css-loader、less-loader
。这和”常识“自左向右解析不太相符合，“常识”可能会认为首先通过 less-loader
解析 less
文件并生成对应的 css
文件，然后与此类似再通过 css-loader
和 style-loader
进行处理。
原因
要解决以上疑问，需要明确2个概念。
首先， loader
本质上是一个函数，Webpack 根据配置中的 test
正则匹配文件并传入文件内容来调用预先配置好的 loader
，即函数。我们配置多个 loader
本质上就是先后调用多个函数，所以 loader
顺序配置错误可能导致潜在问题，得不到预期的输出。
其次，需要分清 compose
和 pipe
。前面提到的自左到右的认识其实是基于 pipe
得出的结论，对于有使用过 Gulp 等流式处理 工具 经验的人来说尤为熟悉，前者的输出等于后者的输入。但 Webpack 配置实际上是基于 compose
，假如把 loader
当作函数，可以将配置看成嵌套的函数调用，如 style-loader(css-loader(less-loader(content)))
，从函数调用顺序可以很容易得出 loader
生效顺序。
参考
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
React开发实战
[美] Cássio de Sousa Antonio / 杜伟、柴晓伟、涂曙光 / 清华大学出版社 / 2017-3-1 / 58.00 元
介绍如何成功构建日益复杂的前端应用程序与接口，深入分析 React库，并详述React生态系统中的其他工具与库，从而指导你创建完整的复杂应用程序。 你将全面学习React的用法以及React生态系统中的其他工具和库(如React Router和Flux 架构)，并了解采用组合方式创建接口的佳实践。本书简明扼要地讲解每个主题，并呈现助你高效完成工作的细节。书中严谨深刻地讲述React中重要的功......一起来看看 《React开发实战》 这本书的介绍吧!
