如何编写一个 Webpack Loader的实现


Posted in Javascript onOctober 18, 2020

前言

在平时自己由零搭建项目时,虽然基础配置都比较熟悉,比如配置 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 的链式调用才能完成转换。

模块

因为 Webpack 本身是运行在 Node.js 之上的,一个 loader 其实就是一个 node 模块,这个模块导出的是一个函数,即:

module.exports = function (source) {
 // source 为 compiler 传递给 Loader 的一个文件的原内容
 // 处理...
 return source // 需要返回处理后的内容
}

这个导出的函数的工作就是获得处理前的原内容,对原内容执行处理后,返回处理后的内容。

替换字符串的 loader

比如我们打包时,想要替换源文件的字符串,这时可以考虑使用 Loader,因为 loader 就是获得源文件内容然后对其进行处理,再返回。

比如 src 目录下有三个文件:

src/msg1.js

export const msg1 = '学习框架'

src/msg2.js

export const msg2 = '深入理解JS'

src/index.js

import { msg1 } from './msg1'
import { msg2 } from './msg2'

function print() {
 console.log(`输出:${msg1}, ${msg2}`)
}

print()

做的事情则是把 msg1 和 msg2 两个文件导入,然后输出两个字符串。

我们要做的事也很简单,把"框架"转为"React 框架", "JS"转为"JavaScript"。

新建 src/loaders/replaceLoader.js文件,

module.exports = function (source) {
 const handleContent = source.replace('框架', 'React框架').replace('JS', 'JavaScript')
 return handleContent
}

就这样,loader 写完了!!!

上面我们讲到,source 是源文件内容,如果打印的话,则是:

如何编写一个 Webpack Loader的实现

使用 Loader

接下来,我们要来使用它,在根目录下新建文件 webpack.config.js

const path = require('path')

module.exports = {
 mode: 'production',
 entry: './src/index.js',
 module: {
  rules: [
   {
    test: /\.js$/,
    use: './src/loaders/replaceLoader.js',
   },
  ],
 },
 output: {
  path: path.resolve(__dirname, 'dist'),
  filename: '[name].js',
 },
}

执行npx webpack, 查看打包结果dist/main.js

(()=>{"use strict";console.log("输出:学习React框架, 深入理解JavaScript")})();

替换成功!

需要注意的是,use里面填写的 loader 是去node_modules目录里面找的,由于我们是自定义的 loader,所以不能直接写use: 'replaceLoader',但直接写路径的方式未免难看点,我们可以通过 webpack 来配置:

module.exports = {
 resolveLoader: {
  modules: ['node_modules', './src/loaders'], // node_modules找不到,就去./src/loaders找
 },
 module: {
  rules: [
   {
    test: /\.js$/,
    use: 'replaceLoader',
   },
  ],
 },
}

获取 loader 的 options

写完之后,让我们来想想,其实就是写一个功能函数嘛。

当然,这只是最简单的例子,如果 loader 可以传入参数呢,比如:

module: {
 rules: [
  {
   test: /\.js$/,
   use: {
    loader: 'replaceLoader',
    options: {
     params: 'replaceString',
    },
   },
  },
 ],
},

这个时候可以使用this.query来获取,通过this.query.params就能拿到,这里需要注意的是,this 上下文是有用的,所以这个 loader 导出函数不能是箭头函数。

但 webpack 更推荐loader-utils模块来获取,它提供了许多有用的工具,最常用的一种工具是获取传递给 loader 的选项。

首先要安装

npm i -D loader-utils

修改src/loaders/replaceLoader.js

const { getOptions } = require('loader-utils')

module.exports = function (source) {
 console.log(getOptions(this)) // { params: 'replaceString' }
 console.log(this.query.params) // replaceString
 const handleContent = source.replace('框架', 'React框架').replace('JS', 'JavaScript')
 return handleContent
}

这里需要注意的是,getOptions(this)参数传入的是 this,也就是说

打印结果:

{ params: 'replaceString' }
{ params: 'replaceString' }
{ params: 'replaceString' }

this.callback()

上面都是返回原来内容转换后的内容,但有些场景下还需要返回其他东西比如 sourceMap

module.exports = function (source) {
 // 告诉 Webpack 返回的结果
 this.callback(null, source, sourceMaps)
}

另外也不需要 return 了,所以也可使用此 API 替代 return

const { getOptions } = require('loader-utils')

module.exports = function (source) {
 const handleContent = source.replace('框架', 'React框架').replace('JS', 'JavaScript')
 this.callback(null, handleContent)
}

自定义 loader 应用场景

在所有 function 外面加一层 try catch 代码块捕获错误,避免手动繁琐添加。
实现中英文替换:可以将文字用占位符如{{ title }}包裹,检测到占位符则根据环境变量替换为中英文。

到此这篇关于如何编写一个 Webpack Loader的实现的文章就介绍到这了,更多相关Webpack Loader实现内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript实现上传图片前的预览(TX的面试题)
Aug 20 Javascript
JS支持带x身份证号码验证函数
Aug 10 Javascript
自定义一个jquery插件[鼠标悬浮时候 出现说明label]
Jun 27 Javascript
js+csss实现的一个带复选框的下拉框
Sep 29 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
Mar 04 Javascript
js完美解决IE6不支持position:fixed的bug
Apr 24 Javascript
Javascript的表单验证-初识正则表达式
Mar 18 Javascript
详解angular中通过$location获取路径(参数)的写法
Mar 21 Javascript
浅析JS抽象工厂模式
Dec 14 Javascript
详解微信UnionID作用
May 15 Javascript
基于vue实现图片验证码倒计时60s功能
Dec 10 Javascript
vue实现微信浏览器左上角返回按钮拦截功能
Jan 18 Javascript
JavaScript中EventBus实现对象之间通信
Oct 18 #Javascript
vuex刷新后数据丢失的解决方法
Oct 18 #Javascript
JavaScript大数相加相乘的实现方法实例
Oct 18 #Javascript
vue任意关系组件通信与跨组件监听状态vue-communication
Oct 18 #Javascript
vscode+gulp轻松开发小程序的完整步骤
Oct 18 #Javascript
详解VUE中的插值( Interpolation)语法
Oct 18 #Javascript
vue自定义树状结构图的实现方法
Oct 18 #Javascript
You might like
ThinkPHP模板比较标签用法详解
2014/06/30 PHP
PHP中模拟处理HTTP PUT请求的例子
2014/07/22 PHP
destoon出现验证码不显示时的紧急处理方法
2014/08/22 PHP
安装ImageMagick出现error while loading shared libraries的解决方法
2014/09/23 PHP
PHP实现时间比较和时间差计算的方法示例
2017/07/24 PHP
PHP面向对象程序设计之多态性的应用示例
2018/12/19 PHP
JavaScript 入门·JavaScript 具有全范围的运算符
2007/10/01 Javascript
jquery图片不完全按比例自动缩小的简单代码
2013/07/29 Javascript
jquery win 7透明弹出层效果的简单代码
2013/08/06 Javascript
js获取多个tagname的节点数组
2013/09/22 Javascript
整理Javascript数组学习笔记
2015/11/29 Javascript
基于jquery实现图片上传本地预览功能
2016/01/08 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
2016/01/19 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
2016/12/14 Javascript
一个炫酷的Bootstrap导航菜单
2016/12/28 Javascript
vue中如何引入jQuery和Bootstrap
2017/04/10 jQuery
js 毫秒转天时分秒的实例
2017/11/17 Javascript
vue-router的两种模式的区别
2019/05/30 Javascript
[01:06:54]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第二场 2月28日
2021/03/11 DOTA
django之常用命令详解
2016/06/30 Python
浅析python协程相关概念
2018/01/20 Python
python去除文件中重复的行实例
2018/06/29 Python
python如何创建TCP服务端和客户端
2018/08/26 Python
Python编程图形库之Pillow使用方法讲解
2018/12/28 Python
python3 selenium自动化测试 强大的CSS定位方法
2019/08/23 Python
python 导入数据及作图的实现
2019/12/03 Python
python wav模块获取采样率 采样点声道量化位数(实例代码)
2020/01/22 Python
在matplotlib中改变figure的布局和大小实例
2020/04/23 Python
咖啡为什么会有酸味?你喝到的咖啡為什麼是酸的?
2021/03/17 冲泡冲煮
HTML5之多线程(Web Worker)
2019/01/02 HTML / CSS
Bluebella美国官网:英国性感内衣品牌
2018/10/04 全球购物
Java语言程序设计测试题改错题部分
2014/07/22 面试题
建筑总经理岗位职责
2014/02/02 职场文书
2015年医德医风工作总结
2015/04/02 职场文书
起诉意见书范文
2015/05/19 职场文书
刑事附带民事代理词
2015/05/25 职场文书