【狗拿耗子webpack - require, 一文解决动态加载问题】

wn531

于 2024-08-08 23:53:19 发布

阅读量426

点赞数 17

文章标签： webpack 前端 node.js 后端

本文链接：https://blog.csdn.net/qq_38428433/article/details/141039190

版权

场景

我们有个使用场景，程序启动时，把文件路径传入，再去加载这个文件。项目整体是采用webpack打包，本以为会顺利，直到…

问题

编译时的警告和运行时的报错，
编译时警告 warning： Critical dependency: the request of a dependency is an expression
运行时报错 error ： Cannot find module ‘XXX’.

分析

查了些资料，webpack打包本身不支持动态加载。打包时，webpack会进行打包分析，无论是import 还是 require的路径内容，都必须要在编译时就找到，否则打包后路径就有问题，但是有些场景，只有在运行时才能确定文件的加载路径。

划重点，无论import / require ，也不管你啥场景，webpack编译时 就必须要知道你引入的文件路径。这样想运行时动态引入就做不了啊，但是有时就是需要运行时才能确认文件路径，webpack这里真是狗拿耗子，烦人。

解决方案

网上回答五花八门，大体思路都是绕开webpack在编译时进行加载。这里总结了2种最简单直接方式，

方式1 ： non_webpack_require

declare const __non_webpack_require__: NodeRequire;
const root = __non_webpack_require__(path);

但是这种和webpack强绑定，也就是必须要用webpack编译打包。

如果用其它的打包工具打包，会不识别这个关键字 non_webpack_require
如果是typescript语法，还要像上面一样提前声明下，否则编译过不了

方式2： eval

const myCustomModule = eval('require')(myCustomPath)

简单，粗暴，管用！就巧妙绕过了webpack的限制，且兼容其它编译打包工具。

原理浅析

这里简单解释下，为什么webpack里用require 不行，直接上一个例子，

这个是编译前源码，

const processedByWebpack = require("./module");
const notProcessed = __non_webpack_require__("./non-webpack");

console.log(processedByWebpack);
console.log(notProcessed);

编译后结果，

/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {

const processedByWebpack = __webpack_require__(1);
const notProcessed = require("./non-webpack");

console.log(processedByWebpack);
console.log(notProcessed);

/***/ }),
/* 1 */
/***/ (function(module, exports) {

module.exports = "This module is bundled with webpack"

/***/ })
/******/ ]);

可以看到webpack把require语句直接转换为 webpack_require(1) ，然后1是对应的代码。所以如果你写的是一个动态路径，webpack就不知道去哪里找，也不能把对应代码打包进来。

此时如果你巧用 non_webpack_require，webpack也便不再为难你，不再解析成__webpack_require__，而是直接转为require，则可以动态运行时解析路径。