使用相同名稱的文件和類後Webpack 3錯誤

Question

我重命名我的文件使用相同的名稱作爲類名稱後，我注意到此錯誤。

e.g

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. 

你有沒有遇到這種類型的問題，你是如何解決它的？

Answer 1

該警告與使用相同名稱的類和文件無關，也與School名稱/文件無關。該警告告訴您，您有兩個具有相同名稱的文件，除了至少是一個字符（而不是小寫字母，您有大寫字母或反之亦然）。

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

HeaderSideBar.jsx和HeaderSidebar.jsx是兩個不同的文件（B在它們中的一個大寫）。這可能是一個問題，因爲某些文件系統在敏感的情況下，這意味着當你要求一個不存在的文件，比如說file.js時，它會很樂意給你FILE.js（如果存在的話）。而區分大小寫的文件系統只會告訴你，file.js不存在並導致錯誤。在這種情況下，你將在一個文件系統上有一個工作應用程序，而另一個文件系統上有一個破壞的應用程序同樣，如果同時使用這兩個文件，則可能這兩種使用都會解析爲相同的文件，即使您期望別的東西。

爲了避免這種潛在的問題，你不應該有兩個同名的文件。除了文件系統的差異之外，用不同的外殼使用相同的名稱並不是一個好主意，因爲它使得識別需要編輯的文件變得更加困難。