如何编写一个 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 相关文章推荐
AJAX架构之Dojo篇
Apr 10 Javascript
Javascript 获取链接(url)参数的方法
Feb 15 Javascript
ASP小贴士/ASP Tips javascript tips可以当桌面
Dec 10 Javascript
javascript实现数字验证码的简单实例
Feb 10 Javascript
jQuery轮播图效果精简版完整示例
Sep 04 Javascript
jQuery实现复选框的全选和反选
Feb 02 Javascript
vue cli 3.0 使用全过程解析
Jun 14 Javascript
LayerClose弹窗关闭刷新方法
Aug 17 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
Sep 14 Javascript
一看就会的vuex实现登录验证(附案例)
Jan 09 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
Apr 15 Javascript
原生js实现下拉框选择组件
Jan 20 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
四月新番又没了,《Re:从零开始的异世界生活》第二季延期至7月播出
2020/05/06 日漫
PHP5在Apache下的两种模式的安装
2006/09/05 PHP
PHP函数篇详解十进制、二进制、八进制和十六进制转换函数说明
2011/12/05 PHP
PHP取整函数:ceil,floor,round,intval的区别详细解析
2013/08/31 PHP
showModelessDialog()使用详解
2006/09/21 Javascript
用js实现的仿sohu博客更换页面风格(简单版)
2007/03/22 Javascript
js hover 定时器(实例代码)
2013/11/12 Javascript
JS/Jquery判断对象为空的方法
2015/06/11 Javascript
用JS实现简单的登录验证功能
2017/07/28 Javascript
Vue实例中生命周期created和mounted的区别详解
2017/08/25 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
2017/11/10 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
2017/12/14 Javascript
浅谈Vue内置component组件的应用场景
2018/03/27 Javascript
jQuery+ajax读取json数据并按照价格排序示例
2018/03/28 jQuery
Angular6 正则表达式允许输入部分中文字符
2018/09/10 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
2019/10/21 Javascript
谈谈我在vue-cli3中用预渲染遇到的坑
2020/04/22 Javascript
js中复选框的取值及赋值示例详解
2020/10/18 Javascript
使用wxpython实现的一个简单图片浏览器实例
2014/07/10 Python
python爬虫常用的模块分析
2014/08/29 Python
跟老齐学Python之玩转字符串(3)
2014/09/14 Python
详解Python中的strftime()方法的使用
2015/05/22 Python
Python解析excel文件存入sqlite数据库的方法
2016/11/15 Python
Python中的TCP socket写法示例
2018/05/11 Python
Python 字符串与数字输出方法
2018/07/16 Python
django 2.2和mysql使用的常见问题
2019/07/18 Python
python实现抠图给证件照换背景源码
2019/08/20 Python
Python使用sys.exc_info()方法获取异常信息
2020/07/23 Python
MADE荷兰:提供原创设计师家具
2018/04/03 全球购物
宝拉珍选英国官网:Paula’s Choice英国
2019/05/29 全球购物
荣耀俄罗斯官网:HONOR俄罗斯
2020/10/31 全球购物
最新大学生创业计划书写作攻略
2014/04/02 职场文书
小学生班干部竞选稿
2015/11/20 职场文书
golang import自定义包方式
2021/04/29 Golang
python接口测试返回数据为字典取值方式
2022/02/12 Python
python数字图像处理之图像自动阈值分割示例
2022/06/28 Python