什么是 vendor 前缀？
在前端开发中，通常我们需要引入第三方库或框架，比如 jQuery、Bootstrap、React 等等，这些库或框架的 CSS 样式或者 JS 代码难免会与我们自己的代码命名冲突。因此，我们需要给这些库或框架的代码加上一个前缀，目的是让它们的 CSS 样式和 JS 代码与我们自己的代码的命名不会混淆。
通常我们把这个前缀叫做 vendor 前缀。比如将 jQuery 的 CSS 样式添加 vendor 前缀为：.jquery-class{color: red;}，这样我们的代码里就可以正常使用 .class。而不会与 jQuery 的 CSS 命名冲突，即使我们的代码中也存在一个 .class，也不会影响原有的样式。
Webpack 如何自动添加 vendor 前缀？
Webpack 作为一个优秀的前端打包工具，自然可以为我们自动添加 vendor 前缀。要实现这个功能，我们可以用到 PostCSS 插件 - autoprefixer，它是一个自动补全 CSS3 前缀的插件，可以帮助我们在构建过程中自动添加 CSS3 前缀和 vendor 前缀。
以下是 Webpack 的配置文件中自动添加 vendor 前缀的配置方法：
- 安装 autoprefixer：
npm install --save-dev autoprefixer postcss-loader
- 在 Webpack 的配置文件中添加以下代码：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-- ---
-
----- ---------
---- -
---------------
-------------
-
------- -----------------
-------- -
-------- -- -- -------------------------
-
-
-
-
-
-
-- ---
-上述代码中，我们使用了 postcss-loader，并将 autoprefixer 作为其插件使用。这样打包后的 CSS 文件就会自动添加上对应的 CSS3 前缀和 vendor 前缀了。
常见的 vendor 前缀列表
当然，不同的浏览器的支持情况不一样，我们需要针对项目情况选择合适的前缀。
以下是一些常见的 vendor 前缀：
- ms(Microsoft Internet Explorer)
- mso(Microsoft Office API)
- moz(Mozilla Firefox)
- o(Opera)
- webkit(Chrome和Safari)
我们可以在 autoprefixer 提供的浏览器支持列表中进一步选择我们需要的前缀。
总结
Webpack 打包时自动添加 vendor 前缀是一个非常实用的功能，在大型项目中可以有效避免代码命名冲突。只需要在 Webpack 配置文件中添加两行代码就可以实现这个功能，非常简单易懂。在使用时只需要选择合适的前缀，就可以为我们的开发工作提供很大的便利。
示例代码
-- -------------------- ---- -------
-- ---------
---- -
-------- -----
-
-- -----------------
-------------- - -
------- -
------ -
-
----- ---------
---- ---------------- ------------- -
------- -----------------
-------- -
-------- -- -- --------------------------
----------------------- -
-------- -----
---- --
-
---
-
--
-
-
-
-来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6463ba60968c7c53b04bfa77