Webpack 是一个非常流行的前端打包工具，它可以将多个 JavaScript 文件打包成一个文件，同时支持加载各种资源，如 CSS、图片和字体等。在 Webpack 中，我们可以使用 ProvidePlugin 自动加载模块，这可以显著提高开发效率。
ProvidePlugin 简介
ProvidePlugin 是 Webpack 提供的一个插件，它可以在所有模块中自动加载模块，而不需要使用 import 或 require 关键字。例如，我们可以使用 ProvidePlugin 自动加载 jQuery，这样我们就可以在代码中直接使用 $ 符号，而不需要在每个模块中都引入 jQuery。
使用 ProvidePlugin
使用 ProvidePlugin 非常简单，我们只需要在 Webpack 的配置文件中添加如下代码：
-- -------------------- ---- -------
----- ------- - -------------------
-------------- - -
-------- -
--- -----------------------
-- ---------
------- ---------
---------------- --------
--
-
--在上面的代码中，我们使用 ProvidePlugin 自动加载了 jQuery，这样我们就可以在代码中直接使用 $、jQuery 或 window.jQuery，而不需要在每个模块中都引入 jQuery。
示例代码
下面是一个使用 ProvidePlugin 自动加载 jQuery 的示例代码：
// index.js
$(function() {
console.log('Hello, jQuery!');
});在上面的代码中，我们可以直接使用 $ 符号，因为我们已经在 Webpack 的配置文件中使用 ProvidePlugin 自动加载了 jQuery。
总结
使用 ProvidePlugin 自动加载模块可以显著提高开发效率，特别是在大型项目中。但是需要注意的是，自动加载模块可能会增加打包文件的大小，因此需要谨慎使用。同时，我们也可以使用 expose-loader 将模块暴露到全局变量中，这样我们就可以在浏览器中直接使用模块。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65c5a6e9add4f0e0ff02fe09