【 狗拿耗子webpack - require, 一文解决动态加
场景
我们有个使用场景 ，程序启动时，把文件路径传入，再去加载这个文件。项目整体是采用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
