在使用 webpack 打包前端项目的过程中，我们经常会使用 vendor 来提取第三方库，以便能够更好地管理和优化代码。然而，有时候我们会遇到一个问题，就是在打包完成后，因为某些第三方库的文件名大小写不一致，导致在浏览器中运行时出现模块找不到的错误。
这个问题看起来很小，但是它却给我们带来了很大的困扰。因此，在本文中，我将详细介绍如何解决这个问题，并提供一些示例代码以帮助大家更好地理解。
问题分析
首先，我们需要了解一下为什么会出现这个问题。在 Windows 系统中，文件名是不区分大小写的，而在 Linux 系统中，文件名是区分大小写的。因此，当我们在 Windows 系统中使用 npm 安装第三方库时，库的文件名是不区分大小写的。而当我们在 Linux 系统中使用 webpack 打包时，由于文件名是区分大小写的，就会导致找不到某些模块。
例如，我们使用 npm 安装了一个名为 “react-router-dom” 的库，它的文件名是 “react-router-dom.js”。在 Windows 系统中，我们可以通过引入 “react-router-dom” 或 “React-Router-DOM” 来访问它。但是，在 Linux 系统中，我们只能通过引入 “react-router-dom” 来访问它。如果我们在 webpack 打包后，只提取 “react-router-dom” 这个模块，那么在 Linux 系统中，就会出现找不到模块的错误。
解决方案
为了解决这个问题，我们需要在 webpack 的配置文件中添加一个插件，用于将第三方库的文件名统一为小写。这个插件就是 “case-sensitive-paths-webpack-plugin”。
安装插件
首先，我们需要安装这个插件。在命令行中输入以下命令：
npm install --save-dev case-sensitive-paths-webpack-plugin
配置插件
然后，在 webpack 的配置文件中，添加以下代码：
const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
module.exports = {
// ...其他配置
plugins: [
new CaseSensitivePathsPlugin()
]
};这样，当我们打包第三方库时，插件就会将所有文件名统一为小写，从而解决大小写导致的模块找不到问题。
示例代码
下面是一个示例代码，展示了如何在 webpack 中使用 “case-sensitive-paths-webpack-plugin” 插件：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------------------------ - -----------------------------------------------
-------------- - -
----- -------------
------ -
------- --------- ------------ -------------------
--
------- -
----- ----------------------- --------
--------- ------------
-------- ----------------
-------------- -----
--
-------- -
--- --------------------------
-
--结论
在使用 webpack 打包前端项目时，我们经常会使用 vendor 来提取第三方库。然而，由于文件名大小写不一致的问题，可能会导致模块找不到的错误。为了解决这个问题，我们需要在 webpack 的配置文件中添加一个插件，用于将第三方库的文件名统一为小写。这个插件就是 “case-sensitive-paths-webpack-plugin”。通过使用这个插件，我们可以避免因大小写导致的模块找不到问题，从而更好地管理和优化代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6756ff3e6c154532630531de