在前端开发中，我们经常需要使用到打包工具，例如 webpack。而在某些情况下，我们可能需要将某些第三方库从打包文件中排除，以此来减小文件体积和对页面加载速度进行优化。
在这种情况下，webpack2-externals-plugin 这个 npm 包就为我们提供了一种解决方案。
webpack2-externals-plugin 简介
webpack2-externals-plugin 是一个可以将指定的第三方库从打包文件中抽离出来的 webpack 插件，它可以让我们更加方便地进行代码的优化和分离。
通过使用该插件，我们可以将某些库作为外链引入，或者使用 CDN 或其他方式引入，以此来减小项目的文件大小，同时提高网页的加载速度。
安装 webpack2-externals-plugin
在使用 webpack2-externals-plugin 之前，我们需要先将其安装到项目中。可以使用 npm 命令进行安装：
npm install webpack2-externals-plugin --save-dev
使用 webpack2-externals-plugin
使用 webpack2-externals-plugin 只需要简单的配置即可。首先，在 webpack 的配置文件中引入该插件：
const webpackExternals = require('webpack2-externals-plugin');接着，在配置中添加如下代码：
-- -------------------- ---- -------
-------------- - -
-- --- ----
-------- -
--- ------------------
-- ------
-- --- ------ --
------- -
-- ------- ------ --
----- ---------
-- --- --- --
-- -------- --- --
-- ------ --------------------
-- ---- -------------------------------------------------------------
---- ----
-
--
-
--这样，webpack2-externals-plugin 就可以按照我们指定的配置来处理打包文件中的第三方库了。
示例代码
下面是一个完整的 webpack 配置文件的示例代码：
-- -------------------- ---- -------
----- ---------------- - -------------------------------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
-------- -
--- ------------------
------- -
----- ---------
---- -------------------------------------------------------------
-
--
-
--在上面的示例代码中，我们将 jQuery 从打包文件中抽离出来，使用了来自 CDN 的外链引入方式。
总结
通过使用 webpack2-externals-plugin，我们可以方便地实现第三方库的优化和分离。在实际开发中，我们可以根据项目的实际情况，选择不同的优化手段，以提高网页的加载速度，给用户更好的使用体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671048dd3466f61ffdc82