Webpack加載程序可以處理哪些文件？

Question

當您在加載程序對象中的test鍵之后設置正則表達式時，它會查看項目中的所有文件並使用您指定的加載程序來加載它們，即使入口點中的文件不需要這些文件也是如此？ 然后將其放置在bundle.js文件中嗎？

Answer 1

不，它將僅包含腳本所需的內容。

Answer 2

<img src={ require('../some/img.png') } />是一種告訴Webpack您的源代碼需要運行此圖像的方法。

在生產Webpack構建中，它將被編譯成類似<img src="http://yoursite/whatever/89de0f2.png" /> 。 require()語句永遠不會執行，它會替換為有效的Javascript代碼。 該替換的代碼是bundle.js 。

然后將圖像放入您指定的任何輸出文件夾（例如本地dist/文件夾）中，並將其重命名為唯一的名稱，通常是文件內容的某些哈希值，從而產生89de0f2.png 。 （我在示例中使用了這個名稱，但通常看起來像這樣）。

現在，當您上載該文件89de0f2.png ，您的源代碼將完全引用89de0f2.png ，因此可以保證該圖像的版本存在。 Webpack通過這種方式為您提供保證生產的資產加載。

如果您特別需要，Wepback只會將img.png作為89de0f2.png放在dist/文件夾中。 任何其他圖像都不會放在該文件夾中。

您可能還會詢問有關base64編碼圖像的問題，並將其直接放入bundle.js文件中。 在這種情況下， dist/不會放入任何圖像，但是所有其他規則都會響應。 require()調用仍將替換為有效的Javascript。

在一種情況下，Webpack將需要多個資產。 您可以要求使用諸如<img src={ require.context( './images', true, /\\.png/ ) } /> \\.png <img src={ require.context( './images', true, /\\.png/ ) } /> ，Webpack會將該目錄中的所有png文件構建到dist/文件夾中。 有關更多上下文，請參見此Stackoverflow問題 。