如何编写一个 Webpack Loader的实现

 更新时间:2020年10月18日 17:08:01   作者:JackySummer  
这篇文章主要介绍了如何编写一个 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 的链式调用才能完成转换。

模块

因为 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 是源文件内容,如果打印的话,则是:

使用 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实现内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js 模仿锚点定位的实现方法

    js 模仿锚点定位的实现方法

    下面小编就为大家带来一篇js 模仿锚点定位的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • js 中 document.createEvent的用法

    js 中 document.createEvent的用法

    用该方法创建了 Event 对象以后,必须用上表中所示的初始化方法初始化对象。关于初始化方法的详细信息,请参阅 Event 对象参考。
    2010-08-08
  • 跟我学Nodejs(三)--- Node.js模块

    跟我学Nodejs(三)--- Node.js模块

    这是本系列的第三篇文章了,前面2篇网友们反馈回来不少的消息,加上最近2天比较忙,一直没来得及整理,周末了,赶紧给大家整理下发出来,本文讲的是node.js模块
    2014-05-05
  • 学习javascript,实现插入排序实现代码

    学习javascript,实现插入排序实现代码

    首先新建一个空列表,用于保存已排序的有序数列(我们称之为"有序列表")。从原数列中取出一个数,将其插入"有序列表"中,使其仍旧保持有序状态。
    2011-07-07
  • javascript搜索自动提示功能的实现

    javascript搜索自动提示功能的实现

    使用 jQuery(Ajax)/PHP/MySQL实现自动完成功我觉得我有必要写这个教程,因为曾经见到的大部分关于自动完成的应用程序都只是给你一个程序源码包,然后告诉你怎么使用,而不是告诉你它是如何工作的以及为什么这样做。
    2008-06-06
  • 学习使用Bootstrap输入框、导航、分页等常用组件

    学习使用Bootstrap输入框、导航、分页等常用组件

    这篇文章主要教大家学习使用Bootstrap输入框、导航、分页等常用组件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • Webpack实战加载SVG的方法

    Webpack实战加载SVG的方法

    本篇文章主要介绍了Webpack实战加载SVG的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • 微信小程序实现带参数的分享功能(两种方法)

    微信小程序实现带参数的分享功能(两种方法)

    本文通过两种方法给大家介绍微信小程序实现带参数的分享,需要的朋友可以参考下
    2019-05-05
  • EasyUi combotree 实现动态加载树节点

    EasyUi combotree 实现动态加载树节点

    这篇文章主要介绍了EasyUi combotree 实现动态加载树节点的相关资料,需要的朋友可以参考下
    2016-04-04
  • 实现JavaScript高性能的数据存储

    实现JavaScript高性能的数据存储

    本文主要对JavaScript的数据存储,产生性能问题的原因,内存泄露的几种情况等做了简要分析介绍,需要的朋友可以看下
    2016-12-12

最新评论