对文件和类使用相同名称后的Webpack 3错误答案

【问题标题】：Webpack 3 Error after using the same name for file and class对文件和类使用相同名称后的Webpack 3错误
【发布时间】：2017-10-13 00:18:53
【问题描述】：

我在重命名文件以使用与类名相同的名称后注意到此错误。

例如

class School {}

文件名：School.jsx 并使用以下方式导入文件：

import  School from ./School

以下是我从 Webpack 得到的错误。

WARNING in ./client/components/admin/includes/HeaderSideBar.jsx
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* /Users/developer/Desktop/Books/node_modules/babel-loader/lib/index.js!/Users/developer/Desktop/Books/client/components/admin/includes/HeaderSideBar.jsx
    Used by 1 module(s), i. e.
    /Users/developer/Desktop/Books/node_modules/babel-loader/lib/index.js!/Users/developer/Desktop/Books/client/components/admin/pages/AddANewBook.jsx
* /Users/developer/Desktop/Books/node_modules/babel-loader/lib/index.js!/Users/developer/Desktop/Books/client/components/admin/includes/HeaderSidebar.jsx
    Used by 1 module(s), i. e.
    /Users/developer/Desktop/Books/node_modules/babel-loader/lib/index.js!/Users/developer/Desktop/Books/client/components/admin/index.jsx
webpack: Compiled with warnings.

您是否遇到过此类问题，您是如何解决的？

【问题讨论】：

标签： javascript node.js express webpack

【解决方案1】：

警告与对类和文件使用相同的名称无关，也与School 名称/文件无关。警告告诉您，您有两个具有相同名称的文件，除了至少一个字符的情况（而不是小写，您有一个大写，反之亦然）。

components/admin/includes/HeaderSideBar.jsx
components/admin/includes/HeaderSidebar.jsx

HeaderSideBar.jsx 和 HeaderSidebar.jsx 是两个不同的文件（B 在其中一个文件中大写）。这可能是个问题，因为某些文件系统区分大小写，这意味着当您请求一个不存在的文件时，比如说file.js，它会很乐意给您FILE.js如果那个存在。而区分大小写的文件系统只会告诉您file.js 不存在并导致错误。在这种情况下，您将在一个文件系统上拥有一个工作应用程序，而在另一个文件系统上拥有一个损坏的应用程序。同样，如果同时使用了这两个文件，即使您期望其他文件，也有可能这两个文件都解析为同一个文件。

为避免此潜在问题，您不应拥有两个同名文件。除了文件系统的差异之外，使用不同大小写的相同名称并不是一个好主意，因为这样会更难区分您需要编辑哪个文件。

【讨论】：

谢谢，这真的很有帮助。