在前端开发过程中，我们常常需要使用一些第三方库或者工具来辅助开发。而这些库和工具可能会增加项目的体积，导致页面加载速度过慢，影响用户体验。为了解决这个问题，Webpack提供了隐藏模块的功能。
什么是隐藏模块
在Webpack中，每个模块都有一个唯一的标识符。当一个模块被引用时，Webpack会将其打包进输出文件中。然而，有些模块虽然被引用了，但实际上并不需要被打包到输出文件中。这种情况下，就可以使用Webpack的隐藏模块功能，将这些不需要打包的模块从输出文件中剔除。
隐藏模块的作用
隐藏模块的主要作用是减小输出文件的体积，提高页面加载速度。同时，也可以提高模块的安全性，避免一些敏感信息被暴露在输出文件中。
如何配置隐藏模块
在Webpack的配置文件中，我们可以通过externals选项来配置隐藏模块。该选项可以接受一个对象或一个函数作为参数。
如果是对象，对象的键表示需要隐藏的模块名，值表示该模块在全局环境中的变量名。例如：
// webpack.config.js
module.exports = {
externals: {
jquery: '$' // 表示将jquery模块隐藏，并将全局变量$作为替代
}
}如果是函数，则需要在函数中判断模块名，返回true表示需要隐藏该模块，返回false则不需要。例如：
-- -------------------- ---- -------
-- -----------------
-------------- - -
---------- ----------------- -------- --------- -
-- ------------------------- - -- -----------------------
------ -------------- ------- - - ---------
-
-----------
-
-示例代码
下面是一个使用Webpack隐藏模块的示例代码：
// index.js
import $ from 'jquery';
import _ from 'lodash';
$('body').html(_.join(['Hello', 'webpack'], ' '));-- -------------------- ---- -------
---- ---------- ---
--------- -----
------
------
----- ----------------
-------------- ---------------
-------
------
------- -------------------------
-------
--------- -------------------- ---- -------
-- -----------------
----- ---- - ----------------
-------------- - -
------ -------------
------- -
--------- ------------
----- ----------------------- -------
--
---------- -
------- --- -- -----------------------
-
--在上面的示例中，我们将jquery模块隐藏，并将全局变量$作为替代。这样打包后的输出文件中就不会包含jquery模块的代码了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12939