在前端项目中，我们常常需要引入第三方库或者插件。这些库和插件通常都有自己的依赖关系和文件结构，如果直接引入会出现各种问题。Webpack是一个强大的打包工具，可以帮助我们解决这些问题。
但是，不同的供应商可能有不同的要求和限制，本文将介绍如何根据供应商的要求来配置Webpack打包方式。
1. 分析供应商
在引入新的供应商之前，首先要对其进行分析。以下是一些需要考虑的问题：
- 该供应商是否提供了npm包？
- 该供应商是否支持模块化开发？
- 该供应商是否支持ES6语法？
- 该供应商是否有其他依赖关系？
通过对供应商的分析，我们可以了解到其最基本的特性，从而更好地进行下一步操作。
2. 配置Webpack
2.1 使用npm包
如果该供应商提供了npm包，那么我们可以直接使用npm来安装并引入该包，Webpack会自动处理依赖关系。
// 安装 npm install vendor-package --save // 引入 import VendorPackage from 'vendor-package';
2.2 不支持模块化开发
如果该供应商不支持模块化开发，我们需要手动将其封装成一个模块。
// 将供应商库暴露为全局变量
window.VendorLibrary = VendorLibrary;
// 将其封装为一个模块，并导出
module.exports = {
VendorLibrary: window.VendorLibrary
};然后在Webpack配置文件中，使用Externals选项来告诉Webpack不要打包这个库，而是从全局变量中获取它。
// webpack.config.js
module.exports = {
externals: {
'vendor-library': 'VendorLibrary',
},
};2.3 不支持ES6语法
如果该供应商不支持ES6语法，我们可以使用Babel来转义代码。在Webpack配置文件中，添加Babel-loader和相关插件。
-- -------------------- ---- -------
-- -----------------
-------------- - -
------- -
------ -
-
----- --------
---- -
-
------- ---------------
-------- -
-------- ----------------------
--
--
--
--
--
--
--2.4 其他依赖关系
如果该供应商有其他依赖关系，我们需要在Webpack配置文件中进行相应的配置。
-- -------------------- ---- -------
-- -----------------
-------------- - -
-------- -
------ -
------------ -----------------------------
-
--
------- -
------ -
-
----- ----------------------------
---- -
-
------- -----------------
-------- -
-------- -
------------
--
--
--
--
--
--
--
--在上述代码中，我们使用了resolve选项来为依赖项设置别名。这样，在引入vendor-library时会自动解析为vendor-library/dist/vendor-library.js。
3. 示例代码
以下是一个完整的Webpack配置文件示例：
-- -------------------- ---- -------
-- -----------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- --------- - --------
--
---------- -
----------------- ----------------
--
-------- -
------ -
------------ -----------------------------
-
--
------- -
------ -
-
----- --------
---- -
-
------- ---------------
-------- -
--------
- ---------------------------------------------------------- --------
--------------------------------------------------------------------------------