前言
在前端开发中，我们经常使用 npm 包管理工具来管理我们的项目依赖，但是如果我们的项目需要在多个页面或组件中使用同一个依赖，就会出现重复引用的情况，这不仅造成了代码冗余，还浪费了加载资源的时间。
为了解决这个问题，我们可以使用 externalize-relative-module-loader 这个工具来将共用的依赖打包成一个单独的文件，减少了代码量和请求次数，提高了页面的加载速度。
安装和使用
首先，我们需要为我们的项目安装 externalize-relative-module-loader：
npm install externalize-relative-module-loader --save-dev
接着，在 webpack 的配置文件中添加相应的 loader：
-- -------------------- ---- -------
------- -
------ -
-
----- -------- -- --------
---- -
-
-- ---------------------------------- ---
------- -------------------------------------
-------- -
-- - ----------- ---
-------- --------- -------------
-- ------
--------- -------------------
-- ----
----- -----------
-
-
--
-- -- ------------ ------- ----------- ----
-------- --------------
-
-
-配置说明
modules
要 externalize 的模块，支持字符串和正则表达式。
filename
生成的文件名，可以使用 [hash] 占位符，生成唯一的文件名。
path
生成的文件路径。
示例代码
-- -------------------- ---- ------- -- ------ ------ ----- ---- -------- ------ -------- ---- ------------ -- ------ ---------------- ---------- ------------ ------------------------------- --
-- -------------------- ---- -------
-- ------- ----
-------------- - -
------ -----------------
------- -
--------- -------------------
----- --------- - ----------
--
------- -
------ -
-
----- -------- -- --------
---- -
-
-- ---------------------------------- ---
------- -------------------------------------
-------- -
-- - ----------- ---
-------- --------- -------------
-- ------
--------- -------------------
-- ----
----- -----------
-
-
--
-- -- ------------ ---
-------- --------------
-
-
-
--总结
externalize-relative-module-loader 是一个非常实用的工具，可以帮助我们将共用的 npm 包代码提取出来，减少代码量和请求次数，提高页面加载速度。在使用时，需要根据自己项目的情况合理配置相应的参数，这样才能发挥它最大的作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f056c9b403f2923b035bece