如何编写一个 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 相关文章推荐
JQuery的html(data)方法与<script>脚本块的解决方法
Mar 09 Javascript
js实现select下拉框菜单
Dec 08 Javascript
浅谈JavaScript中的this指针和引用知识
Aug 05 Javascript
vue制作加载更多功能的正确打开方式
Oct 12 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
Nov 09 Javascript
jQuery Ajax File Upload实例源码
Dec 12 Javascript
深入理解Javascript中的作用域链和闭包
Apr 25 Javascript
简单实现jQuery弹幕效果
May 06 jQuery
解决Jquery下拉框数据动态获取的问题
Jan 25 jQuery
vue中的过滤器实例代码详解
Jun 06 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
Feb 07 Javascript
如何在node环境实现“get数据解析”代码实例
Jul 03 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
《一拳超人》埼玉一拳下去,他们存在了800年毫无意义!
2020/03/02 日漫
修改Zend引擎实现PHP源码加密的原理及实践
2008/04/14 PHP
PHP循环输出指定目录下的所有文件和文件夹路径例子(简单实用)
2014/05/10 PHP
golang 调用 php7详解及实例
2017/01/04 PHP
jQuery select的操作实现代码
2009/05/06 Javascript
超酷的网页音乐播放器DewPlayer使用方法
2010/12/18 Javascript
基于iframe实现类似于ajax的页面无刷新
2014/05/31 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
2014/08/18 Javascript
js实现Select下拉框具有输入功能的方法
2015/02/06 Javascript
简介JavaScript中用于处理正切的Math.tan()方法
2015/06/15 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
2016/02/14 Javascript
JavaScript必知必会(三) String .的方法来自何方
2016/06/08 Javascript
vue2.0中click点击当前li实现动态切换class
2017/06/21 Javascript
AngularJS实现的输入框字数限制提醒功能示例
2017/10/26 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
2017/11/27 Javascript
Vue下拉框回显并默认选中随机问题
2018/09/06 Javascript
JavaScript实现alert弹框效果
2020/11/19 Javascript
python中PIL安装简单教程
2016/04/21 Python
Python WEB应用部署的实现方法
2019/01/02 Python
Python简单过滤字母和数字的方法小结
2019/01/09 Python
Python 单例设计模式用法实例分析
2019/09/23 Python
opencv python 对指针仪表读数识别的两种方式
2021/01/14 Python
意大利简约的休闲品牌:Aspesi
2018/02/08 全球购物
西班牙用户之间买卖视频游戏的平台:Wakkap
2020/03/21 全球购物
英国第一职业高尔夫商店:Clickgolf.co.uk
2020/11/18 全球购物
化学教师自荐信范文
2013/12/28 职场文书
《孔子拜师》教学反思
2014/02/24 职场文书
高三毕业典礼主持词
2014/03/27 职场文书
白血病捐款倡议书
2014/05/14 职场文书
英文演讲稿开场白
2014/08/25 职场文书
2014年“世界无车日”活动方案
2014/09/21 职场文书
2015年店长工作总结范文
2015/04/08 职场文书
摘录式读书笔记
2015/07/01 职场文书
Python获取百度热搜的完整代码
2021/04/07 Python
springboot中rabbitmq实现消息可靠性机制详解
2021/09/25 Java/Android
cypress测试本地web应用
2022/06/01 Javascript