Webpack4 自定义 Loader

2024-08-23 22:08
文章标签 自定义 webpack4 loader

本文主要是介绍Webpack4 自定义 Loader，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1.Loader

Loader 就像是一个翻译员，能把源文件经过转化后输出新的结果，并且一个文件还可以链式的经过多个翻译员翻译。

以下面处理 CSS 文件为例：

  1. CSS 源代码会先交给 css-loader 处理，找出 CSS 中依赖的资源、压缩 CSS 等；
  2. 把 css-loader 输出的 CSS 交给 style-loader 处理，转换成通过脚本加载的 JavaScript 代码( JS模块 )；

简单的使用案例：

const path = require('path');
module.exports = {entry: './src/main.js',output: {// 1.指定输出的文件的名称为 bundle.js ( 默认为main.js )filename: 'bundle.js',// 2. 指定输出文件存放的目录（默认是dist目录）path: path.resolve(__dirname, './dist'), // 借助node的path模块来拼接一个绝对路径},module: {rules: [{test: /\.css$/, // 匹配 .css 结尾的文件,注意test的值不是一个字符串，而是一个正则use: ['style-loader', 'css-loader'],}]}
};

一个 Loader 的职责是单一的，只需要完成一种转换。

如果一个源文件需要经历多步转换才能正常使用，就通过多个 Loader 去转换。

在调用多个 Loader 去转换一个文件时，每个 Loader 会链式的顺序执行， 第一个 Loader 将会拿到需处理的原内容，上一个 Loader 处理后的结果会传给下一个接着处理，最后的 Loader 将处理后的最终结果返回给Webpack。

2.Loader的使用

下面将回顾一下CSS Loader的使用方法：

新建一个项目

|-- package.json
|-- src
|   |       `-- common.js
|   |       `-- index.html
|   |       `-- main.css
|           `-- main.js
`-- webpack.config.js

package.json

{"name": "testcssloader","version": "1.0.0","description": "","main": "main.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "webpack --mode development","build": "webpack --mode production"},"author": "liujun","license": "ISC","devDependencies": {"css-loader": "^3.0.0","style-loader": "^0.23.1","webpack": "^4.35.3","webpack-cli": "^3.3.6"}
}

scripts 属性里面编写了3个脚本：其中 dev 对应的脚本是 构建测试版；其中 build对应的脚本是 构建发布版

webpack.config.js

const path = require('path');
module.exports = {entry: './src/main.js',output: {// 1.指定输出的文件的名称为 bundle.js ( 默认为main.js )filename: 'bundle.js',// 2. 指定输出文件存放的目录（默认是dist目录）path: path.resolve(__dirname, './dist'), // 借助node的path模块来拼接一个绝对路径},module: {rules: [{test: /\.css$/, // 匹配 .css 结尾的文件,注意test的值不是一个字符串，而是一个正则use: ['style-loader', 'css-loader'],}]}
};

use接收一个数组，数组中可以存放字符串和对象，并且use的别名是 loaders。

例如：

use: ['style-loader', 'css-loader']  等于 
use: [{ loader:'style-loader',options:{} }, 'css-loader']等于 
use: [ { loader:'style-loader',options:{} }, {loader:'css-loader', options: {} } ]

use: ['style-loader', 'css-loader']  等于
loaders: ['style-loader', 'css-loader']等于
loaders: ['style-loader', { loader:'css-loader', options: {} }]

main.css

body {background-color: pink;
}

common.js

function showHelloWorld(content) {console.log("aaaaa_xxxx")alert('hello world')console.log("bbbbb_xxxx")
}
console.log("ccccc_xxxx")
// 通过 CommonJS 规范导出 showHelloWorld 函数
module.exports = showHelloWorld;

main.js

console.log('aaaaa_xxxx')
console.log("bbbbb_xxxx")
// 1.通过 CommonJS 规范导入 showHelloWorld 函数
const showHelloWorld = require('./common.js');
// 2.执行 showHelloWorld 函数
showHelloWorld('Webpack的安装和使用');
// 3.通过 CommonJS 规范导入 CSS 模块
require('./main.css');
console.log("ccccc_xxxx")

index.html

<html>
<head><meta charset="UTF-8">
</head>
<body>
<div id="app"></div>
<!--导入 Webpack 输出的 JavaScript 文件-->
<script src="../dist/bundle.js"></script>
</body>
</html>

本地安装 webpack 和 用到的 loader

npm install webpack@4.35.3  --save-dev
npm install webpack-cli@3.3.6  --save-dev
npm install style-loader@0.23.1  --save-dev
npm install css-loader@3.0.0  --save-dev

在项目的根目录，执行脚本构建项目

npm run dev

打包后输出的结果

|-- dist
|   |-- bundle.js
|-- node_modules
|-- package-lock.json
|-- package.json
|-- src
|   |-- common.js
|   |-- index.html
|   |-- main.css
|   `-- main.js
`-- webpack.config.js

查看打包之后的部分 bundle.js 文件

.......
......./***/ "./src/common.js":
/*!***********************!*\!*** ./src/common.js ***!\***********************/
/*! no static exports found */
/***/ (function(module, exports) {eval("\r\nfunction showHelloWorld(content) {\r\n  console.log(\"aaaaa_xxxx\")\r\n  alert('hello world')\r\n  console.log(\"bbbbb_xxxx\")\r\n}\r\nconsole.log(\"ccccc_xxxx\")\r\n// 通过 CommonJS 规范导出 showHelloWorld 函数\r\nmodule.exports = showHelloWorld;\n\n//# sourceURL=webpack:///./src/common.js?");/***/ }),/***/ "./src/main.css":
/*!**********************!*\!*** ./src/main.css ***!\**********************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {eval("\nvar content = __webpack_require__(/*! !../node_modules/css-loader/dist/cjs.js!./main.css */ \"./node_modules/css-loader/dist/cjs.js!./src/main.css\");\n\nif(typeof content === 'string') content = [[module.i, content, '']];\n\nvar transform;\nvar insertInto;\n\n\n\nvar options = {\"hmr\":true}\n\noptions.transform = transform\noptions.insertInto = undefined;\n\nvar update = __webpack_require__(/*! ../node_modules/style-loader/lib/addStyles.js */ \"./node_modules/style-loader/lib/addStyles.js\")(content, options);\n\nif(content.locals) module.exports = content.locals;\n\nif(false) {}\n\n//# sourceURL=webpack:///./src/main.css?");/***/ }),/***/ "./src/main.js":
/*!*********************!*\!*** ./src/main.js ***!\*********************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {eval("console.log('aaaaa_xxxx')\r\nconsole.log(\"bbbbb_xxxx\")\r\n// 1.通过 CommonJS 规范导入 showHelloWorld 函数\r\nconst showHelloWorld = __webpack_require__(/*! ./common.js */ \"./src/common.js\");\r\n// 2.执行 showHelloWorld 函数\r\nshowHelloWorld('Webpack的安装和使用');\r\n// 3.通过 CommonJS 规范导入 CSS 模块\r\n__webpack_require__(/*! ./main.css */ \"./src/main.css\");\r\nconsole.log(\"ccccc_xxxx\")\n\n//# sourceURL=webpack:///./src/main.js?");/***/ })/******/ });

从上面打包后的 bundle.js 可以看出 main.js 和 common.js 这两个文件中的 console.log(）控制台输出语句也被打包了，那么本地打开index.html文件，查看控制台输出如下：

aaaaa_xxxx
main.js:2 bbbbb_xxxx
common.js:7 ccccc_xxxx
common.js:3 aaaaa_xxxx
common.js:5 bbbbb_xxxx
main.js:9 ccccc_xxxx

那么如果我们在打包的时候不想打包 console.log(）控制台输出语句 怎么办呢？这个时候可以使用别人写好的插件UglifyJsPlugin，其实也可以自定义一个删除 console.log()控制台输出语句 的Loader。下面就开始演示如何自定义一个自己的 Loader

2.自定义Loader

一个 Loader 的职责是单一的，只需要完成一种转换。

那么下面将编写一个console-loader 加载器来删除 console.log()控制台输出语句

1.定义一个console-loader

1.新建一个loaders文件夹

|-- dist
|-- node_modules
|-- package-lock.json
|-- package.json
|-- src
|   |-- loaders
|   |   | -- console-loader.js
|   |-- common.js
|   |-- index.html
|   |-- main.css
|   `-- main.js
`-- webpack.config.js

2.自定义一个 console-loader

console-loader.js

module.exports = function (content) {console.log('----------------------')console.log(content) // content 是每一个node的模块（就是js文件，包含其它loader自动生成的js文件）console.log('----------------------')return content;
};

一个 Loader 其实就是一个 Node.js 模块，这个模块需要导出一个函数。 这个导出的函数的工作就是获得处理前的原内容content，对原内容content执行处理后，返回处理后的内容。

上面的 console-loader 就是简单的打印出获得处理前的原内容content。

3.在webpack的配置文件使用 console-loader

webpack.config.js

const path = require('path');
module.exports = {entry: './src/main.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, './dist'), },// 1.配置 Webpack 如何寻找 LoaderresolveLoader:{// 2.去哪些目录下寻找 Loader，有先后顺序之分，先去node_modules寻找，再去./loaders/下寻找modules: ['node_modules','./loaders/'],},module: {rules: [{test: /\.css$/, use: ['style-loader', 'css-loader'],},{  test: /\.js$/,// 匹配 .js 结尾的文件,注意test的值不是一个字符串，而是一个正则use: ['console-loader'], // 使用自定义的 console-loader}]}
};

ResolveLoader 用于配置 Webpack 如何寻找 Loader。 默认情况下只会去 node_modules 目录下寻找，为了让 Webpack 加载放在本地项目中的 Loader 需要修改 resolveLoader.modules。

4.在根目录执行打包命令：npm run dev， 然后控制台输出如下：

PS F:\blog\webpack-study\webpackCode\12-编写自定义Loader> npm run dev> testcssloader@1.0.0 dev F:\blog\webpack-study\webpackCode\12-编写自定义Loader
> webpack --mode development----------------------
console.log('aaaaa_xxxx')
console.log("bbbbb_xxxx")
// 1.通过 CommonJS 规范导入 showHelloWorld 函数
const showHelloWorld = require('./common.js');
// 2.执行 showHelloWorld 函数
showHelloWorld('Webpack的安装和使用');
// 3.通过 CommonJS 规范导入 CSS 模块
require('./main.css');
console.log("ccccc_xxxx")
----------------------
----------------------function showHelloWorld(content) {console.log("aaaaa_xxxx")alert('hello world')console.log("bbbbb_xxxx")
}
console.log("ccccc_xxxx")
// 通过 CommonJS 规范导出 showHelloWorld 函数
module.exports = showHelloWorld;
----------------------
----------------------
"use strict";/*MIT License http://www.opensource.org/licenses/mit-license.phpAuthor Tobias Koppers @sokra
*/
// css base code, injected by the css-loader
// eslint-disable-next-line func-names
module.exports = function (useSourceMap) {var list = []; // return the list of modules as css stringlist.toString = function toString() {return this.map(function (item) {var content = cssWithMappingToString(item, useSourceMap);if (item[2]) {return "@media ".concat(item[2], "{").concat(content, "}");}return content;}).join('');}; // import a list of modules into the list// eslint-disable-next-line func-names。。。。。
。。。。。function toComment(sourceMap) {// eslint-disable-next-line no-undefvar base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));var data = "sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(base64);return "/*# ".concat(data, " */");
}
----------------------
----------------------/*** When source maps are enabled, `style-loader` uses a link element with a data-uri to* embed the css on the page. This breaks all relative urls because now they are relative to a* bundle instead of the current page.** One solution is to only use full urls, but that may be impossible.** Instead, this function "fixes" the relative urls to be absolute according to the current page
location.** A rudimentary test suite is located at `test/fixUrls.js` and can be run via the `npm test` command.**/module.exports = function (css) {// get current locationvar location = typeof window !== "undefined" && window.location;if (!location) {throw new Error("fixUrls requires window.location");}// blank or null?if (!css || typeof css !== "string") {return css;}var baseUrl = location.protocol + "//" + location.host;var currentDir = baseUrl + location.pathname.replace(/\/[^\/]*$/, "/");。。。。。。。。。。// send back the fixed cssreturn fixedCss;
};----------------------

从上面的控制台输出可以看出，自定义的 console-loader 加载器已经被执行。

控制台已经打印出所有需要处理的每一个JS模块的内容

JS模块的内容包含：main.js 模块的内容 ， commont.js模块的内容 , css-loader 加载器处理css后的js模块 的内容 和 style-loader 处理css之后的js模块的内容

2.实现console-loader的功能

编写一个正则来匹配每一个JS模块内容中所有的 console.log(‘’xxxx“）字符串， 如果匹配上后全部替换成空字符串

console-loader.js

const loaderUtils = require('loader-utils');// 1.是否覆盖js文件中所有console的: loader
function repalceConsole(content){// 2.正则来匹配 console.log() 语句var regex = /console.log(.+)/g// 3.替换 console.log() 语句为空格content=content.replace(regex,'')// 4.\r\n 代表时换行符号var pre = '// 这个注解是：console-loader 自动添加的注释\r\n'// 5.在每个模块内容的前面添加一行注释 prereturn pre + content
}module.exports = function (content) {console.log('----------------------')console.log(content) // content 是每一个node的模块（就是js文件，包含其它loader自动生成的js文件）console.log('----------------------')// return content;return repalceConsole(content);
};

在项目的根目录执行:npm run dev , 然后查看 bundle.js 部分的代码：

。。。。。
。。。。。/***/ "./src/common.js":
/*!***********************!*\!*** ./src/common.js ***!\***********************/
/*! no static exports found */
/***/ (function(module, exports) {eval("// 这个注解是：console-loader 自动添加的注释\r\n\r\nfunction showHelloWorld(content) {\r\n  \r\n  alert('hello world')\r\n  \r\n}\r\n\r\n// 通过 CommonJS 规范导出 showHelloWorld 函数\r\nmodule.exports = showHelloWorld;\n\n//# sourceURL=webpack:///./src/common.js?");/***/ }),/***/ "./src/main.css":
/*!**********************!*\!*** ./src/main.css ***!\**********************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {eval("\nvar content = __webpack_require__(/*! !../node_modules/css-loader/dist/cjs.js!./main.css */ \"./node_modules/css-loader/dist/cjs.js!./src/main.css\");\n\nif(typeof content === 'string') content = [[module.i, content, '']];\n\nvar transform;\nvar insertInto;\n\n\n\nvar options = {\"hmr\":true}\n\noptions.transform = transform\noptions.insertInto = undefined;\n\nvar update = __webpack_require__(/*! ../node_modules/style-loader/lib/addStyles.js */ \"./node_modules/style-loader/lib/addStyles.js\")(content, options);\n\nif(content.locals) module.exports = content.locals;\n\nif(false) {}\n\n//# sourceURL=webpack:///./src/main.css?");/***/ }),/***/ "./src/main.js":
/*!*********************!*\!*** ./src/main.js ***!\*********************/
/*! no static exports found */
/***/ (function(module, exports, __webpack_require__) {eval("// 这个注解是：console-loader 自动添加的注释\r\n\r\n\r\n// 1.通过 CommonJS 规范导入 showHelloWorld 函数\r\nconst showHelloWorld = __webpack_require__(/*! ./common.js */ \"./src/common.js\");\r\n// 2.执行 showHelloWorld 函数\r\nshowHelloWorld('Webpack的安装和使用');\r\n// 3.通过 CommonJS 规范导入 CSS 模块\r\n__webpack_require__(/*! ./main.css */ \"./src/main.css\");\r\n\n\n//# sourceURL=webpack:///./src/main.js?");/***/ })/******/ });

细看上面 bundle.js 的代码可以发现。

1）main.js 等模块前面都自动添加了自定义注释

2）main.js 等模块中的 console.log() 语句都被替换成了空格

3.接收自定Loader的options参数

在webpack.config.js中使用 console-loader加载器的时候，传递一个options参数。

webpack.config.js

const path = require('path');
module.exports = {entry: './src/main.js',output: {filename: 'bundle.js',path: path.resolve(__dirname, './dist'), },resolveLoader:{// 1.去哪些目录下寻找 Loader，有先后顺序之分modules: ['node_modules','./loaders/'],},module: {rules: [{test: /\.css$/, use: ['style-loader', 'css-loader'],},{  test: /\.js$/,use:{loader: 'console-loader', // 2.使用自定义 console-loaderoptions: { // 3.给 自定义 console-loader 加载器 传递参数// 4.如果为true 就会把js中所有的console.log语法删除// 5.如果为false则不就会删除clear: true }}}]}
};

直接使用 loader-utils 工具来获取 console-loader 加载器传入的 options 参数：

console-loader.js

// 1.loader-utils 是加载器的工具类
const loaderUtils = require('loader-utils');// 2.是否覆盖js文件中所有console的: loader
function repalceConsole(content,_this){// 3.获取到用户给当前 Loader 传入的 optionsconst options = loaderUtils.getOptions(_this);  console.log(options) // { clear: true }if(options.clear){var regex = /console.log(.+)/gcontent=content.replace(regex,'')}// \r\n 代表时换行符号var pre = '// 这个注解是：console-loader 自动添加的注释\r\n'return pre + content
}module.exports = function (content) {console.log('----------------------')console.log(content) // content 是每一个node的模块（就是js文件，包含其它loader自动生成的js文件）console.log('----------------------')// 4.this 是webpack提供给加载器的上下文 loaderContextreturn repalceConsole(content, this);
};

在项目的根目录执行 npm run dev 即可使用该 console-loader 加载器处理 console.log() 的语法

源码下载

这篇关于Webpack4 自定义 Loader的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1100627。

相关文章

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
自定义类型：结构体(续)

自定义类型：结构体(续)

目录 一. 结构体的内存对齐 1.1 为什么存在内存对齐？ 1.2 修改默认对齐数 二. 结构体传参 三. 结构体实现位段 一. 结构体的内存对齐 在前面的文章里我们已经讲过一部分的内存对齐的知识，并举出了两个例子，我们再举出两个例子继续说明： struct S3{double a;int b;char c;};int mian(){printf("%zd\n",s
阅读更多...
Spring 源码解读：自定义实现Bean定义的注册与解析

Spring 源码解读：自定义实现Bean定义的注册与解析

引言 在Spring框架中，Bean的注册与解析是整个依赖注入流程的核心步骤。通过Bean定义，Spring容器知道如何创建、配置和管理每个Bean实例。本篇文章将通过实现一个简化版的Bean定义注册与解析机制，帮助你理解Spring框架背后的设计逻辑。我们还将对比Spring中的BeanDefinition和BeanDefinitionRegistry，以全面掌握Bean注册和解析的核心原理。
阅读更多...
Oracle type （自定义类型的使用）

Oracle type （自定义类型的使用）

oracle - type   type定义： oracle中自定义数据类型 oracle中有基本的数据类型，如number，varchar2，date，numeric，float....但有时候我们需要特殊的格式， 如将name定义为（firstname,lastname）的形式，我们想把这个作为一个表的一列看待，这时候就要我们自己定义一个数据类型 格式 ：create or repla
阅读更多...
HTML5自定义属性对象Dataset

HTML5自定义属性对象Dataset

原文转自HTML5自定义属性对象Dataset简介 一、html5 自定义属性介绍 之前翻译的“你必须知道的28个HTML5特征、窍门和技术”一文中对于HTML5中自定义合法属性data-已经做过些介绍，就是在HTML5中我们可以使用data-前缀设置我们需要的自定义属性，来进行一些数据的存放，例如我们要在一个文字按钮上存放相对应的id： <a href="javascript:" d
阅读更多...
一步一步将PlantUML类图导出为自定义格式的XMI文件

一步一步将PlantUML类图导出为自定义格式的XMI文件

一步一步将PlantUML类图导出为自定义格式的XMI文件 说明： 首次发表日期：2024-09-08PlantUML官网： https://plantuml.com/zh/PlantUML命令行文档： https://plantuml.com/zh/command-line#6a26f548831e6a8cPlantUML XMI文档: https://plantuml.com/zh/xmi
阅读更多...
argodb自定义函数读取hdfs文件的注意点，避免FileSystem已关闭异常

argodb自定义函数读取hdfs文件的注意点，避免FileSystem已关闭异常

一、问题描述 一位同学反馈，他写的argo存过中调用了一个自定义函数，函数会加载hdfs上的一个文件，但有些节点会报FileSystem closed异常，同时有时任务会成功，有时会失败。 二、问题分析 argodb的计算引擎是基于spark的定制化引擎，对于自定义函数的调用跟hive on spark的是一致的。udf要通过反射生成实例，然后迭代调用evaluate。通过代码分析，udf在
阅读更多...
鸿蒙开发中实现自定义弹窗 (CustomDialog)

鸿蒙开发中实现自定义弹窗 (CustomDialog)

效果图 #思路 创建带有 @CustomDialog 修饰的组件 ，并且在组件内部定义controller: CustomDialogController 实例化CustomDialogController，加载组件，open()-> 打开对话框 ， close() -> 关闭对话框 #定义弹窗 (CustomDialog)是什么？ CustomDialog是自定义弹窗，可用于广告、中
阅读更多...
mybatis框架基础以及自定义插件开发

mybatis框架基础以及自定义插件开发

文章目录 框架概览框架预览MyBatis框架的核心组件MyBatis框架的工作原理MyBatis框架的配置MyBatis框架的最佳实践 自定义插件开发1. 添加依赖2. 创建插件类3. 配置插件4. 启动类中注册插件5. 测试插件 参考文献 框架概览 MyBatis是一个优秀的持久层框架，它支持自定义SQL、存储过程以及高级映射，为开发者提供了极大的灵活性和便利性。以下是关于M
阅读更多...
vue2实践：第一个非正规的自定义组件-动态表单对话框

vue2实践：第一个非正规的自定义组件-动态表单对话框

前言 vue一个很重要的概念就是组件，作为一个没有经历过前几代前端开发的我来说，不太能理解它所带来的“进步”，但是，将它与后端c++、java类比，我感觉，组件就像是这些语言中的类和对象的概念，通过封装好的组件（类），可以通过挂载的方式，非常方便的调用其提供的功能，而不必重新写一遍实现逻辑。 我们常用的element UI就是由饿了么所提供的组件库，但是在项目开发中，我们可能还需要额外地定义一
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2