实现一个 webpack loader

官网上的定义：loader 是一个转换器，用于对源代码进行转换。

例如 babel-loader 可以将 ES6 代码转换为 ES5 代码。sass-loader 将 sass 代码转换为 css 代码。

一般 loader 的配置代码如下：

module: {rules: [{test: /\.js$/,use: [{loader: path.resolve('./loader1.js')},{loader: path.resolve('./loader2.js')}]}]
}

rules 数组包含了一个个匹配规则和具体的 loader 文件。

上述代码中的 test: /\.js$/ 就是匹配规则，表示对 js 文件使用下面的两个 loader。

而 loader 的处理顺序是自下向上的，即先用 loader2 处理源码，然后将处理后的代码再传给 loader1。

loader2 处理后的代码就是最终的打包代码。

loader 的实现

loader 其实是一个函数，它的参数是匹配文件的源码，返回结果是处理后的源码。下面是一个最简单的 loader，它什么都没做：

module.exports = function (source) {return source
}

这么简单的 loader 没有挑战性，我们可以写一个稍微复杂一点的 babel-loader：

const loaderUtils = require('loader-utils')
const babel = require('@babel/core')
function loader (source) {let cb = this.async()let options = loaderUtils.getOptions(this)babel.transform(source, {...options,sourceMap: true,filename: this.resourcePath.split('/').pop()}, function (err, r) {cb(err, r.code, r.map)})
}module.exports = loader

异步 loader 需要调用 webpack 的 async() 生成一个 callback，它的第一个参数是 error，第二个参数就是处理后的源码。当你异步处理完源码后，调用 callback 即可。

loader-utils 是一个 webpack 工具类，通过一些方法配合 loader 处理文件。loader 是可以配置 options 参数，然后内部可以直接通过 getOptions 获取。

module: {rules: [{test: /\.js$/,use: [{loader: path.resolve('./loader/loader1.js'),options: {presets: ['@babel/preset-env']}}]}]
}

babel-loader 使用的是 @babel/core 处理代码转换的，但是 @babel/core 本身不转换代码，它是调用 @babel/preset-env 插件转换的。

实现一个 webpack loader相关推荐

如何编写一个 Webpack Loader
前言在平时自己由零搭建项目时,虽然基础配置都比较熟悉,比如配置 file-loader, url-loader, css-loader 等,配置不难,但究竟是怎么起作用的呢,今天就来说说如何编写一个 ...
Webpack: Loader 开发分享
Webpack: Loader 开发分享文章目录 Webpack: Loader 开发分享正文 1. Concept 概念 2. Configuration 配置实例 3. Custom 自定义 ...
webpack loader的套路
学习webpack loader,最后模拟style-loader.less-loader 什么是loader loader是一个函数,用来把文件转换成webpack识别的模块. loader API ...
从零开始一个webpack+react项目
从零开始一个webpack+react项目最近在做react组件化的分享,从项目中抽离组件,那么第一步自然是搭建相关的环境本篇旨在从零开始,用最少的配置.最少的代码.最少的依赖来搭建一个最简单的w ...
一次搞懂Webpack Loader
50 亿观众的 "云上奥运",顶级媒体背后的数智化力量东京 2020 奥运会即将闭幕,本届奥运会由于疫情限制,东京地区赛事以无观众的空场形式举行,在无法亲临现场的情况下,全球观众 ...
【javascript】手写一个webpack loder
[javascript]手写一个webpack loder 手写一个loader 为什么需要loader? webpack 实际上只能处理js文件,那么对于除了js文件的其他类型的文件比如 css ...
webpack 复习（四）webpack loader
loader webpack 只是一个打包工具,它只负责分析各个模块的依赖关系,然后形成资源清单,最终打包生成到指定的文件中. 其他的功能需要借助 webpack loader 和 webpack p ...
webpack loader解析及自定义loader
自定义实现webpack loader加载模块,解析指定的类型文件 loader loader是一个导出为函数的node模块,可通过this访问上下文. 特点: loader单一职责,只负责解决单一的 ...
用 vue-cli 手脚架建立一个 webpack 模板 vue 项目
用 vue-cli 手脚架建立一个 webpack 模板 vue 项目一:vue 环境安装如果环境安装好了,可以直接用vue-cli手脚架生成模板项目, 一般用的是webpack模板. 1.去 ...

实现一个 webpack loader

loader 的实现

实现一个 webpack loader相关推荐

最新文章

热门文章