如何编写一个 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动态调整iframe高度的方法
Mar 06 Javascript
Js 随机数产生6位数字
May 13 Javascript
JS中setTimeout()的用法详解
Apr 14 Javascript
jquery+php实现搜索框自动提示
Nov 28 Javascript
node.js中的fs.chmodSync方法使用说明
Dec 18 Javascript
javascript正则表达式之search()用法实例
Jan 19 Javascript
jQuery on()方法示例及jquery on()方法的优点
Aug 27 Javascript
jQuery插件Timelinr 实现时间轴特效
Oct 04 Javascript
超实用的javascript时间处理总结
Aug 16 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
Aug 24 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
Jul 24 Javascript
Vue实现购物车基本功能
Nov 08 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
php is_file()和is_dir()用于遍历目录时用法注意事项
2010/03/02 PHP
phpfpm的作用和用法
2019/10/10 PHP
在IE6下发生Internet Explorer cannot open the Internet site错误
2010/06/21 Javascript
当鼠标移动时出现特效的JQuery代码
2013/11/08 Javascript
node.js中的fs.linkSync方法使用说明
2014/12/15 Javascript
Javascript毫秒数用法实例
2015/02/05 Javascript
Node.js 条形码识别程序构建思路详解
2016/02/14 Javascript
Bootstrap实现input控件失去焦点时验证
2016/08/04 Javascript
jQuery过滤选择器经典应用
2016/08/18 Javascript
JavaScript的兼容性与调试技巧
2016/11/22 Javascript
Require.JS中的几种define定义方式示例
2017/06/01 Javascript
微信小程序实现下拉刷新和轮播图效果
2017/11/21 Javascript
react 实现页面代码分割、按需加载的方法
2018/04/03 Javascript
JavaScript反射与依赖注入实例详解
2018/05/29 Javascript
浅谈微信JS-SDK 微信分享接口开发(介绍版)
2018/08/15 Javascript
跨域请求两种方法 jsonp和cors的实现
2018/11/11 Javascript
浅析Vue.js中v-bind v-model的使用和区别
2018/12/04 Javascript
浅谈vue获得后台数据无法显示到table上面的坑
2020/08/13 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
2020/10/28 Javascript
微信小程序实现左滑删除效果
2020/11/18 Javascript
使用Python3制作TCP端口扫描器
2017/04/17 Python
如何安装多版本python python2和python3共存以及pip共存
2018/09/18 Python
Python数据可视化教程之Matplotlib实现各种图表实例
2019/01/13 Python
python实现电子产品商店
2019/02/26 Python
python自动化测试之如何解析excel文件
2019/06/27 Python
Python GUI编程学习笔记之tkinter事件绑定操作详解
2020/03/30 Python
Python 使用xlwt模块将多行多列数据循环写入excel文档的操作
2020/11/10 Python
CSS3的first-child选择器实战攻略
2016/04/28 HTML / CSS
HTML5实现Notification API桌面通知功能
2016/03/02 HTML / CSS
会计电算化专业应届大学生求职信
2013/10/22 职场文书
学期自我鉴定
2013/11/04 职场文书
大学生最新职业生涯规划书范文
2014/01/12 职场文书
高中打架检讨书
2014/02/13 职场文书
工作失误检讨书范文
2015/01/26 职场文书
护士2015年终工作总结
2015/04/29 职场文书
检讨书范文大全
2015/05/07 职场文书