前言
在前端开发中，我们经常使用 webpack 进行打包。而在 webpack 的打包过程中，经常有一些第三方库的引用是不需要打包进入最终的代码中的。这时，就可以使用 externals 配置项进行配置，将这些库排除在打包过程之外。但是，手动管理 externals 配置项可能会非常麻烦，而且存在重复的工作，这时候就可以使用 external-requires-webpack-plugin 这个 npm 包来帮助我们进行自动化配置。
安装
使用 npm 进行安装：
npm install external-requires-webpack-plugin --save-dev
使用方式
1. 简单使用
在 webpack 的配置文件中进行如下配置：
-- -------------------- ---- -------
----- ----------------------------- - --------------------------------------------
-------------- - -
-- -------
-------- -
--- -------------------------------
--
---------- -
-------- --------------- -- - ----- ------ ------------ --
------------ ----------------- -- - --------- ------ --------------- --
-
--然后运行 webpack，就可以看到输出的代码中不再包含 react 和 react-dom 库的代码了。
2. 更加复杂的使用
在上述简单的使用方式中，external-requires-webpack-plugin 的默认行为是将代码中的某个库名字替换为全局对象中的对应对象。但有些情况下，我们需要对这个行为进行更加复杂的控制，比如对于一个类型的库，我们需要区分其生产环境和开发环境使用的方式。这时，我们就需要传入一个自定义的配置来控制 external-requires-webpack-plugin 的行为。
-- -------------------- ---- -------
----- ----------------------------- - --------------------------------------------
-------------- - -
-- -------
-------- -
--- -------------------------------
------ - -- - ----- ---
----------- ---------------
------------ ---------------
-------- ------------------- -- ------------ ------ ------- -
----- ------------------ -- ------------ ------ ------- -
-
--
--
---------- -
-------- --------------- -- ------- -------------------------------- --
------------ -----------------
-
--需要注意的是，在这种方式的配置中，我们需要自己手动将某些库排除在打包过程之外，因为在 external-requires-webpack-plugin 中，使用了 externals 选项的配置，就会覆盖原本的 externals 配置。
总结
在前端开发中，使用 external-requires-webpack-plugin 这个 npm 包进行库的排除工作可以提高开发效率和代码质量。需要注意的是，在使用时要根据实际情况进行配置，以避免出现不必要的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cdf81e8991b448e6905