在前端开发中，Webpack是一个非常常用的打包工具，而Webpack插件则是扩展Webpack功能的重要手段。在这篇文章中，我们将详细介绍一款用于Webpack中的插件——transport-webpack-plugin。
什么是transport-webpack-plugin？
transport-webpack-plugin是一款比较古老的Webpack插件，它用于将编译后的代码转换成一个可运行的CommonJS模块，方便我们在其他环境中调用。
transport-webpack-plugin的作用如下：
- 分离webpack打包后的代码，方便在非webpack环境中运行。
- 通过commonjs的规范，让原先依赖于外部的资源，全部打包在一起，方便运行和移植到其他环境中。
- 针对webpack的所有资源（js、css、图片等），统一进行绑定和管理。
如何在Webpack中使用transport-webpack-plugin？
首先安装transport-webpack-plugin，可以通过npm安装：
--- ------- ------------------------ ----------
在Webpack配置文件中引入transport-webpack-plugin：
----- ---------------------- - ------------------------------------
然后在plugins中添加该插件：
-------- -
--- ------------------------
-- ----
--
-参数详解
TransportWebpackPlugin提供了多个参数，下面我们分别进行介绍。
1. libraryTarget
该参数定义了插件生成的CommonJS模块的类型，默认值是var，即插件会将结果赋值到全局变量。如果我们需要作为一个module使用，可以将该值设为umd。
--- ------------------------ -------------- ----- --
2. library
该参数指定了插件生成的CommonJS模块的名字，如果没有指定，则默认值是output中的filename。
--- ------------------------ -------- ----------- --
3. exports
该参数指定了插件在生成CommonJS模块时需要导出的变量名，可以指定一个数组表示多个变量。
--- ------------------------ -------- ----------- ----------- --
4. modules
该参数用于配置需要绑定的模块，可以指定一个RegExp或者一个Function：
--- ------------------------
-------- -
---------- -- --------------
-------------------- -
------ ---------- --- ---------
-
-
--5.exitsModuleIds
该参数用于配置需要排除的模块id，可以指定一个数组或者RegExp：
--- ------------------------
--------------- -
--------
--------
-
--6. include
该参数用于配置需要包含的文件，可以指定一个RegExp或者一个Function：
--- ------------------------
-------- ------------------ -
------ --------------------------
-
--7. exclude
该参数用于配置需要排除的文件，可以指定一个RegExp或者一个Function：
--- ------------------------
-------- ------------------ -
------ -----------------------
-
--8. debug
该参数用于指定是否输出debug信息。
--- ------------------------ ------ ----- --
示例代码
----- ---- - ----------------
----- ---------------------- - ------------------------------------
-------------- - -
----- --------------
------ -----------------
------- -
----- ----------------------- --------
--------- -----------
--
-------- -
--- ------------------------
-------------- ------------
-------- --------
-------- ----------- ------------
-------- -
---------
-------------------- -
------ ---------- --- --------
-
--
--------------- -
-----------
--
-------- --------------
-------- ------------------ -
------ -------------------------------- --- ---
--
------ -----
--
--
-总结
通过上述args参数的介绍与示例，相信各位已经明白transport-webpack-plugin在Webpack中的使用，以及其作用和优点。使用该插件后，我们可以将Webpack生成的代码转换成一个可运行的CommonJS模块，可以在其他环境中调用。同时，我们也可以将所有的资源统一管理，方便后续的维护和迭代。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60065f89238a385564ab6dc5