在前端开发中，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安装：
npm install transport-webpack-plugin --save-dev
在Webpack配置文件中引入transport-webpack-plugin：
const TransportWebpackPlugin = require('transport-webpack-plugin');然后在plugins中添加该插件：
plugins: [
new TransportWebpackPlugin({
// 插件参数
})
]参数详解
TransportWebpackPlugin提供了多个参数，下面我们分别进行介绍。
1. libraryTarget
该参数定义了插件生成的CommonJS模块的类型，默认值是var，即插件会将结果赋值到全局变量。如果我们需要作为一个module使用，可以将该值设为umd。
new TransportWebpackPlugin({
libraryTarget: 'umd'
})2. library
该参数指定了插件生成的CommonJS模块的名字，如果没有指定，则默认值是output中的filename。
new TransportWebpackPlugin({
library: 'myLibrary'
})3. exports
该参数指定了插件在生成CommonJS模块时需要导出的变量名，可以指定一个数组表示多个变量。
new TransportWebpackPlugin({
exports: ['default', 'otherLib']
})4. modules
该参数用于配置需要绑定的模块，可以指定一个RegExp或者一个Function：
new TransportWebpackPlugin({
modules: [
/\$\.css/, // 绑定jQuery的css方法
function(moduleName) {
return moduleName === 'jquery';
}
]
})5.exitsModuleIds
该参数用于配置需要排除的模块id，可以指定一个数组或者RegExp：
new TransportWebpackPlugin({
exitsModuleIds: [
'react',
/jquery/
]
})6. include
该参数用于配置需要包含的文件，可以指定一个RegExp或者一个Function：
new TransportWebpackPlugin({
include: function(filePath) {
return !/\.less$/.test(filePath);
}
})7. exclude
该参数用于配置需要排除的文件，可以指定一个RegExp或者一个Function：
new TransportWebpackPlugin({
exclude: function(filePath) {
return /\.md$/.test(filePath);
}
})8. debug
该参数用于指定是否输出debug信息。
new TransportWebpackPlugin({
debug: true,
})示例代码
-- -------------------- ---- -------
----- ---- - ----------------
----- ---------------------- - ------------------------------------
-------------- - -
----- --------------
------ -----------------
------- -
----- ----------------------- --------
--------- -----------
--
-------- -
--- ------------------------
-------------- ------------
-------- --------
-------- ----------- ------------
-------- -
---------
-------------------- -
------ ---------- --- --------
-
--
--------------- -
-----------
--
-------- --------------
-------- ------------------ -
------ -------------------------------- --- ---
--
------ -----
--
--
-总结
通过上述args参数的介绍与示例，相信各位已经明白transport-webpack-plugin在Webpack中的使用，以及其作用和优点。使用该插件后，我们可以将Webpack生成的代码转换成一个可运行的CommonJS模块，可以在其他环境中调用。同时，我们也可以将所有的资源统一管理，方便后续的维护和迭代。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065f89238a385564ab6dc5