如何编写一个Webpack Loader来处理长尾词转换？

本文共计1438个文字，预计阅读时间需要6分钟。

前言：在平时自己搭建项目时，经常会遇到需要使用各种Webpack Loader的情况，如file-loader、url-loader、css-loader等。配置这些Loader并不难，但究竟它们是如何起作用的呢？今天就来聊聊如何编写一个Webpack Loader。

前言

在平时自己由零搭建项目时，虽然基础配置都比较熟悉，比如配置 file-loader, url-loader, css-loader 等，配置不难，但究竟是怎么起作用的呢，今天就来说说如何编写一个 Webpack Loader。

Loader 作用

按我自己的简单理解，loader 通常指打包的方案，即按什么方式来处理打包，打包的时候它可以拿到模块源代码，经过特定 loader 的转换后返回新的结果。

比如 sass-loader 可以把 SCSS 代码转换成 CSS 代码

编写 Loader

保持功能单一

我们项目中可能会配置很多，但要记住，要保持一个 Loader 的功能单一，避免做多种功能，只需完成一种功能转换即可。

所以如 less 文件转换成 css 文件，也不是一步到位，而是 less-loader, css-loader, style-loader 几个 loader 的链式调用才能完成转换。