前言
从事前端开发过一段时间后，我发现要学习和掌握的内容还有很多，特别是在模块化开发方面。而在实现模块化开发过程中，webpack 是一个功能强大的工具。webpack 是一个模块化打包工具，它可以把所有模块和资源打包成一个或多个文件，并可以使用插件和 loaders 对文件进行处理。
在 webpack 项目中，如果要使用第三方模块，我们通常需要在项目中 import 引入模块后再打包，但是某些时候我们需要将第三方模块作为外部模块引入而不需要被打包，这时我们可以使用 webpack-umd-external 这个 npm 包。
webpack-umd-external 是什么？
webpack-umd-external 是一个将 npm 包打包成 umd 格式，同时将指定的第三方模块扔到一个单独的文件中的工具。
如何使用 webpack-umd-external?
我们需要先安装 webpack-umd-external，可以使用 npm 安装：
npm install webpack-umd-external --save-dev
安装完成后，我们可以在 webpack 配置文件中使用 webpack-umd-external 打包所需的 npm 包。在 webpack 的 externals 中指定要排除打包的模块名称和路径即可。
webpack-umd-external 使用方法
下面我们来看一个 webpack 配置文件中 webpack-umd-external 的使用方法：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - --------------------------------
-------------- - -
-----
------- -
--------- --------------------------
----- ----------------------- -------
--
-----
---------- -------------------
--------- ---------
--------- --------
--
--在上面代码中，我们使用了 webpack-umd-external 插件，并在 externals 中指定将 jquery 和 moment 模块打包成 umd 格式的插件，这样就可以将它们作为外部模块引入而不用打包到输出文件中了。
示例代码
我们来看一个具体的例子，可以用 webpack-umd-external 将 jquery 打包为单独的 umd 包，示例代码如下：
index.html:
-- -------------------- ---- ------- --------- ----- ----- ---------- ------ ----- ---------------- --------------------------- ------------ ------- ------ ---------- -- --- ---------- ------------- -- -------------- ------- --------------------------- ------- -------
app.js:
import $ from 'jquery'
import moment from 'moment'
const time = moment().format('YYYY-MM-DD HH:mm:ss')
$('#time').html(time)webpack.config.js:
-- -------------------- ---- -------
----- ---- - ---------------
----- ----------------- - -------------------------------
-------------- - -
------ -
---- -----------
--
------- -
--------- --------------------------
----- ----------------------- --------
--
---------- -------------------
--------- ---------
---
-在上面的代码中，我们将 jquery 打包成一个 umd 库，而不是像普通模块一样将它打包到输出文件中，这样就可以避免 jquery 在多个模块中重复打包，提高了打包效率。
总结
webpack-umd-external 是一个很有用的 webpack 插件，它可以将指定的第三方模块作为外部模块引入而不需要被打包，从而提高打包效率。本文详细介绍了 webpack-umd-external 的使用方法，并提供了一个 jquery 打包成 umd 库的示例代码。希望读者能够通过本文学到更多有关 webpack 的知识，在前端开发的道路上不断进步。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedac5ab5cbfe1ea06109d4