在前端开发过程中，我们通常需要动态加载一些模块，比如应用中的插件、组件和第三方库等。这些模块不是在编译时确定的，而是在运行时根据需要加载的，因此需要使用动态 require。
Webpack 是一个模块打包器，除了打包静态模块外，还可以打包动态模块。本文将介绍如何使用 Webpack 打包动态 require 的代码。
动态 require 是什么？
在 Node.js 中，我们可以使用 require 加载 JavaScript 模块，比如：
const module = require('./module.js');这里的路径是一个静态字符串，Webpack 可以静态地分析出依赖关系并将所有依赖打包到输出文件中。但是，在某些情况下，路径不能在编译时确定，例如：
const pluginName = 'pluginA';
const plugin = require(`./plugins/${pluginName}.js`);这里的路径是一个动态字符串，在编译时无法确定，只有在运行时才能确定。在浏览器环境中，这种动态 require 被称为“异步加载”。
使用 Webpack 打包动态 require
Webpack 提供了两种方式来打包动态 require 的代码：使用 require.ensure 或 import()。
使用 require.ensure
require.ensure 是 Webpack 提供的 API，可以用来在运行时异步加载模块。它的语法如下：
require.ensure(dependencies: String[], callback: function(require), chunkName: String)
其中，dependencies 是一个数组，表示需要加载的模块路径。callback 是一个函数，表示加载完成后的回调。chunkName 是一个可选的字符串，表示输出模块的名称。
假设有一个名为 app.js 的入口文件，它需要异步加载一个名为 pluginA.js 的模块，那么代码如下：
function loadPlugin() {
require.ensure([], function(require) {
const plugin = require('./plugins/pluginA.js');
plugin.init();
}, 'pluginA');
}
loadPlugin();在这个例子中，dependencies 为空数组，因为 pluginA.js 没有任何依赖。chunkName 是字符串“pluginA”，表示输出模块的名称。
使用 require.ensure 的好处是可以将依赖打包成一个单独的文件，这样可以减少初始加载时间。另外，require.ensure 还可以指定多个依赖，通过加载多个模块来提高应用性能。
使用 import()
import() 是 ES6 中的语法，用来异步加载 ECMAScript 模块。在浏览器环境中，可以使用 polyfill 来支持这个 API。
import() 的语法如下：
import(moduleName: String) -> Promise
其中，moduleName 是一个字符串，表示需要异步加载的模块路径。
假设有一个名为 app.js 的入口文件，它需要异步加载一个名为 pluginA.js 的模块，那么代码如下：
-- -------------------- ---- -------
-------- ------------ -
------------------------------
---------------------- -
--------------
--
---------------------- -
---------------------
---
-
-------------使用 import() 的好处是语法更加简洁，可以更好地与 ES6 的模块系统配合使用。另外，import() 的 Promise 对象可以处理异步加载过程中的错误，提高代码的健壮性。
示例代码
下面是一个完整的示例，演示如何使用 Webpack 打包动态 require 的代码：
-- -------------------- ---- -------
-- -----------------
-------------- - -
----- --------------
------ ---------------
------- -
--------- ------------
----- --------- - --------
--
--
-- ----------
-------- ------------ -
-- -- --------------
--
------------------ ----------------- -
----- ------ - --------------------------------
--------------
-- -----------
--
-- -- --------
------------------------------
---------------------- -
--------------
--
---------------------- -
---------------------
---
-
-------------
-- ----------------------
------ -------- ------ -
-------------------- -------
-在这个示例中，我们通过配置 webpack.config.js 文件来告诉 Webpack 如何打包代码。在 app.js 文件中，我们定义了一个 loadPlugin 函数，它使用 require.ensure 或 import() 来加载一个名为 pluginA.js 的模块。在 pluginA.js 文件中，我们定义了一个 init 函数，它用来初始化模块。
总结
本文介绍了如何使用 Webpack 打包动态 require 的代码，包括使用 require.ensure 和 import() 两种方式。无论哪种方式，动态 require 都可以帮助我们实现按需加载，提高应用性能。希望本文能对你在前端开发中遇到的动态加载问题有一些帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64537722968c7c53b07d80f1