场景

我们有个使用场景 ，程序启动时，把文件路径传入，再去加载这个文件。项目整体是采用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，则可以动态 运行时解析路径。

思考 谁对谁错

文末照例思考 对与错 ，能看到这里，相信不少研发同学都踩到了这个问题，

找这个问题，我也花了好久。所以是require 错了，还是 webpack 错了，为什么找到这个答案这么费劲。

• require本身就是动态加载，require本身没有错。
• webpack 本身做的 就是打包，打包就涉及到 文件依赖分析，然后都汇总到一个文件，肯定是不倾向于动态加载，但是动态加载对于很多场景也是强需求啊，有些只有在运行时，才能确定依赖文件的具体路径。 当然webpack也给留个口子，

但是文档你写成这样谁能找到， 本身参数内容就多，一句 to do cool stuff 完事，咋就不给个示例? 不稍微解释下。

所以， require没错，webpack本身没错 ， webpack文档不太行 🚫。

Refs:

https://stackoverflow.com/questions/46185302/non-webpack-require-is-not-defined
https://stackoverflow.com/questions/42797313/webpack-dynamic-module-loader-by-require
https://webpack.js.org/api/module-methods/#import