webpack loader-生成新的module

最新推荐文章于 2023-09-08 17:48:28 发布

神奇大叔

最新推荐文章于 2023-09-08 17:48:28 发布

阅读量121

点赞数

分类专栏： webapck 文章标签： webpack javascript 前端

本文链接：https://blog.csdn.net/weixin_43294560/article/details/129419787

版权

webapck 专栏收录该内容

63 篇文章 7 订阅

订阅专栏

文章详细介绍了如何利用webpackloader的this._module.userRequest特性生成额外的module，在处理文件时，通过修改此属性可以创建一个不存在于源文件中的新module，这个新module会被webpack打包并导出。在示例中，当加载o4.js时，loader会生成一个新的moduleo4.jsooo4.js，并引入原始module，最终在构建后的代码中体现这种模块关系。

摘要由CSDN通过智能技术生成

作用

在处理文件的过程中，通过loader生成一个额外的module，该module不是源文件中真实存在的文件，但会被webpack打包生成出来
比如expose-loader中通过生成一个额外的module来导入原始module的内容，然后将导入内容挂载到全局，再导出原始module的导出

使用

核心是使用this._module.userRequest，该API 可读可写，读返回原始文件的绝对路径，写入新的路径webpack会生成一个新的module
相关可配合的API
- 返回文件的相对路径：this.utils.contextify(this.context, this.remainingRequest)

webpack

{
    test:/o4.js$/,
    use:[
        {
            loader:'load',
        }
    ]
}

loader

当处理原始文件’o4.js’时，通过this._module.userRequest生成一个新的module，然后新的module会引入原始module模块
总体流程为：
- 在构建时，当源文件请求o4.js文件，loader匹配o4.js文件，生成的module会变成如下的code内容，当webpack开始处理code时，又会解析到"./o4.js"依赖，所以又会生成真实的o4.js的module

function load(source,map,meta){
    const callback = this.async();
    //额外生成this._module.userRequest+'ooo4.js'命名的module
    this._module.userRequest = this._module.userRequest+'ooo4.js';
  	
    const code='import res from "-!./o4.js"; res();console.log("mm"); const f=function(){console.log("temp")}; export default f'
    
    callback(null,code)
} 


module.exports=load

构建后代码

(() => { // webpackBootstrap
var __webpack_modules__ = ({
	 "./src/o4.jsooo4.js":
		 ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
		
		"use strict";
		__webpack_require__.r(__webpack_exports__);
		__webpack_require__.d(__webpack_exports__, {
		  "default": () => (__WEBPACK_DEFAULT_EXPORT__)
		});
		
		var _o4_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! -!./o4.js */ "./src/o4.js");
		(0,_o4_js__WEBPACK_IMPORTED_MODULE_0__["default"])();
		console.log("mm");
		const f = function () {
		  console.log("temp");
		};
		const __WEBPACK_DEFAULT_EXPORT__ = (f);
	}),
	"./src/o4.js":
		((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
		
		"use strict";
		__webpack_require__.r(__webpack_exports__);
		__webpack_require__.d(__webpack_exports__, {
		  "default": () => (__WEBPACK_DEFAULT_EXPORT__)
		});
		
		function f4(){
		   console.log('044444')
		}
		
		const __WEBPACK_DEFAULT_EXPORT__ = (f4);
	
	})
})

// ...

"use strict";
/*!**********************!*\
  !*** ./src/index.js ***!
  \**********************/
__webpack_require__.r(__webpack_exports__);

// ...

/* harmony import */ var _o4_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./o4.js */ "./src/o4.jsooo4.js");


// ...
(0,_o4_js__WEBPACK_IMPORTED_MODULE_3__["default"])();