webpack：自定义loader

以下是一个自定义loader replace-loader，实现一个类似模板引擎变量替换的简单功能

文件目录

.
├── dist
│   └── index.js            # 打包结果
├── loaders
│   └── replace-loader.js   # 自定义loader
├── src
│   └── index.js            # 要打包的文件入口
├── package.json            # 依赖配置
└── webpack.config.js       # 打包配置

package.json

{"name": "loader-demo","version": "1.0.0","description": "a webpack loader demo","scripts": {"build": "webpack"},"devDependencies": {"loader-utils": "^2.0.0","webpack": "^5.47.0","webpack-cli": "^4.7.2"}
}

webpack.config.js

'use strict';const path = require('path');module.exports = {// 打包入口entry: {index: './src/index.js',},// 指定输出地址及打包出来的文件名output: {path: path.join(__dirname, 'dist'),filename: '[name].js',},// Loader路径resolveLoader: {modules: ['node_modules', './loaders'],},module: {rules: [{test: /.js$/,use: {loader: 'replace-loader',// 传递参数options: {name: 'Tom',},},},],},// 开发环境mode: 'production',
};

loaders/replace-loader.js

const loaderUtils = require('loader-utils');module.exports = function (source) {// 获取参数let options = loaderUtils.getOptions(this);for (let [key, value] of Object.entries(options)) {source = source.replace(`{{${key}}}`, value);}return source;
};

src/index.js

console.log('hi {{name}}');

指定打包命令

$ npm run build

dist/index.js

console.log("hi Tom");

参考
面试官：请实现一个Sass-Loader

webpack：自定义loader相关推荐

webpack自定义loader并发布到npm
一.官网对loader的解释: 1.loader 是导出为一个函数的 node 模块.该函数在 loader 转换资源的时候调用.给定的函数将调用 loader API,并通过 this 上下文访问. ...
webpack自定义loader
创建自己的Loader 创建自己的Loader Loader是用于对模块的源代码进行转换(处理),css-loader.style-loader.babel-loader等. 如何自定义自己的Load ...
Webpack自定义Loader和Plugin方法
手写Loader Loader 本质上是导出函数的 JavaScript 模块,而该模块导出的函数被称为 Normal Loader,在开发 Loader时,我们可以在导出的函数上添加一个 pitch ...
vue-cli Webpack之Loader原理及自定义Loader
文章目录 1. Loader 分类与执行顺序 1.1 Loader 分类 1.2 Loader 执行顺序 1.3 使用Loader方式 1.3.1 内联 Loader 2. 开发 Loader 步骤 ...
Webpack之Loader原理及自定义Loader
文章目录 1. Loader 分类与执行顺序 1.1 Loader 分类 1.2 Loader 执行顺序 1.3 使用Loader方式 1.3.1 内联 Loader 2. 开发 Loader 步骤 ...
webpack loader解析及自定义loader
自定义实现webpack loader加载模块,解析指定的类型文件 loader loader是一个导出为函数的node模块,可通过this访问上下文. 特点: loader单一职责,只负责解决单一的 ...
webpack的loader与plugin原理
文章目录 loader原理 loader执行顺序 loader使用方式 loader的实现参数同步loader 异步loader Raw loader Pitching loader loader ...
webpack之 loader
开篇 loader不难,loader不难,loader不难.默念三遍,然后开始. loader 简介 loader 这个东西配置 webpack 的时候经常用到,刚开始会让人觉得有一种神秘感. 看了文 ...
Unity puerts 自定义Loader和调试和ab包的注意点
输出ab包他会把你创建的ab包都打包也就是在这里的创建的都打包 string assetBundleDirectory = Path.Combine(Application.streamingAs ...

webpack：自定义loader

webpack：自定义loader相关推荐

最新文章

热门文章