Webpack4 自定义 Loader

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

本文主要是介绍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。

相关文章

CSS自定义浏览器滚动条样式完整代码

CSS自定义浏览器滚动条样式完整代码

《CSS自定义浏览器滚动条样式完整代码》：本文主要介绍了如何使用CSS自定义浏览器滚动条的样式，包括隐藏滚动条的角落、设置滚动条的基本样式、轨道样式和滑块样式，并提供了完整的CSS代码示例，通过这些技巧，你可以为你的网站添加个性化的滚动条样式，从而提升用户体验，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...
SpringBoot 自定义消息转换器使用详解

SpringBoot 自定义消息转换器使用详解

《SpringBoot自定义消息转换器使用详解》本文详细介绍了SpringBoot消息转换器的知识,并通过案例操作演示了如何进行自定义消息转换器的定制开发和使用,感兴趣的朋友一起看看吧... 目录一、前言二、SpringBoot 内容协商介绍2.1 什么是内容协商2.2 内容协商机制深入理解2.2.1 内容
阅读更多...
【前端学习】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是自定义弹窗，可用于广告、中
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2