简介
Webpack 是目前前端开发中不可思议的技术之一，可以帮助我们构建现代的 Web 应用程序。除了 Webpack 自带的功能之外，还可以通过安装一些 npm 包来增强我们的开发能力，比如 html-webpack-externals-plugin。
html-webpack-externals-plugin 是一个 Webpack 插件，可以让我们将第三方库从打包后的 js 文件中分离出来，从而加快页面加载速度，减少文件大小，也能避免一些资源冲突的问题。在本篇文章中，我们将介绍如何使用这个插件。
安装
在开始之前，请确保已安装 Webpack 以及 Node.js。安装 html-webpack-externals-plugin 可以通过以下命令：
--- ------- ---------- -----------------------------
配置
在 Webpack 的配置文件中，我们需要引入插件，然后进行一些插件的配置。比如：
----- -------------------------- - -----------------------------------------
-------------- - -
-- ---
-------- -
--- ----------------------------
---------- --
------- ---------
------ -----------------------------------------------------
------- --------
--
--
-
-- ---
-在这个配置中，我们定义了一个名为 HtmlWebpackExternalsPlugin 的插件，并将它添加到了 Webpack 的插件列表中。在插件的配置中，我们使用了 externals 选项，来定义需要从打包后的 js 文件中剥离掉的第三方库。
在 externals 选项中，我们只需要指定第三方库的名字和它在外部被访问的全局变量名。entry 选项指定了从外部引入这个库的地址，这里我们使用了一个 jQuery 的 CDN 地址，全局变量名为 jQuery。
示例
为了更好地理解如何使用这个插件，我们这里提供了一个示例。首先，我们使用 npm 安装 jquery 这个库：
--- ------- ------ ------
然后，我们创建一个 index.js 文件，里面包含以下内容：
------ - ---- --------- --------------------------- ---------
我们还需要创建一个 index.html 文件，将这个 js 文件作为脚本引入到页面中：
--------- -----
------
------
----- ----------------
-------------- --------- ------ ------------
-------
------
--- ----------------------
------- ---------------------------
-------
-------最后，我们需要创建一个 webpack.config.js 文件，其中的配置如下：
----- -------------------------- - -----------------------------------------
-------------- - -
------ -----------------
------- -
--------- --------------
--
-------- -
--- ----------------------------
---------- --
------- ---------
------ -----------------------------------------------------
------- --------
--
--
-
--在这个配置中，我们使用了 html-webpack-externals-plugin 插件，并将 jQuery 剥离出了打包后的 js 文件。当我们运行 Webpack 打包之后，在浏览器中打开 index.html 文件，页面应该成功地展示出了 "Hello, world!" 这个消息。
总结
html-webpack-externals-plugin 是一个非常有用的 Webpack 插件，可以帮助我们更好地管理第三方库的引入和使用。在配置这个插件时，需要注意 externals 选项的配置，它会决定哪些库会被剥离出打包后的 js 文件，并从外部引入这些库。愿这篇文章能帮助你更好地理解和应用这个插件。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/56974