無法識別入口點：無法解析'文件'或'目錄''./src/index.js'

Question

首先，我知道我們應該發佈完整且可重複的問題。 但是，我正在做一個完整的堆Redux教程（http://teropa.info/blog/2015/09/10/full-stack-redux-tutorial.html）， 和我接近結束，這意味着我有很多文件和邏輯已經實現。 由於這個原因，我把我的項目加載到github上，這是公開的（https://github.com/rafaelmarques7/voting_app_tutorial）。這樣，很容易看到項目結構和文件，甚至克隆項目並重現錯誤。

因此，這裏的問題 當我運行NPM運行dev的，我得到了以下錯誤：

ERROR in multi main Module not found: Error: Cannot resolve 'file' or 'directory' ./src/index.js in C:\Users\Y\Desktop\sketches\voting_app\client_side 
    @ multi main 

和有關的WebPack

ERROR in (webpack)-dev-server Module not found: Error: Cannot resolve module 'sockjs-client' in 
    C:\Users\Y\Desktop\sketches\voting_app\client_side\node_modules\webpack-dev-server\client 
    @ (webpack)-dev-server 

ERROR in (webpack)-dev-server/client? Module not found: Error: Cannot resolve 'file' or 'directory' 
    C:\Users\Y\Desktop\sketches\voting_app\client_side\node_modules\url\url.js in 
    C:\Users\Y\Desktop\sketches\voting_app\client_side\node_modules\webpack-dev-server\client 
    @ (webpack)-dev-server/client? 1:10-24 

我居然廣泛試圖解決這個錯誤，搜索stackoverflow和github相關的問題，但是沒有一個解決方案能夠解決我的錯誤。

有什麼建議嗎？ 我真的很感謝幫助！

Answer 1

您的resolve配置有兩個問題。

resolve: { 
    modulesDirectories: ['node_modules', 'src'], 
    extensions: ['.js', '.jsx'], 
    packageMains: ['webpack'] 
}, 

第一個是resolve.extensions需要一個空字符串能夠與全面推廣導入文件。例如，如果您導入./index.js，它將嘗試使用配置的擴展名（在您的案例中爲./index.js.js和./index.js.jsx）解析它。 這是一個webpack 1問題和當前resolve.extensions可以在webpack 2或更高版本中正常工作（實際上，不允許空字符串）。第二個問題是resolve.packageMains。導入節點模塊時使用此選項（具有package.json的目錄）。 Webpack將在package.json中查找這些字段，並使用指定的文件作爲模塊的入口點。節點使用main字段來確定入口點，因此npm包都有一個main字段。您只需要尋找webpack字段，幾乎沒有任何軟件包。更廣泛使用的更新領域是module（詳情請參閱Rollup - pkg.module）。您應該使用webpack 2+中默認的resolve.mainFields（該選項已被重命名）。

你resolve配置變爲：

resolve: { 
    modulesDirectories: ['node_modules', 'src'], 
    extensions: ['', '.js', '.jsx'], 
    packageMains: ['browser', 'module', 'main'] 
}, 

的教程已經快2歲了，因此使用一些舊版本。強烈建議升級webpack，因爲它有很大的改進。當你用一個簡單的配置來處理一個新項目時，使用official migration guide進行升級並不需要太多的努力。