文章地址: https://www.jianshu.com/p/83d540245b07
在剛學React/Vue的時候，配合webpack腳手架學習的過程中，碰到一個問題會非常疑惑，比如在React中有個Public文件夾可以放靜態資源，但是在src目錄中同樣有個assets文件夾，這個同樣也是放靜態資源的，這個就很困惑了，爲何放置靜態資源的地方會有兩個？
兩者區別
其實放在兩個文件夾區別就在於是否會被webpack所處理，如果您將文件放入該public文件夾，webpack 將不會處理它，在你打包的時候，會將public文件夾直接複製一份到你構建出來的文件夾中。而src/assets目錄的文件（前提你在js中有引入），它會被webpack編譯，比如圖片，如果你的圖片小於你在webpack中的loader下設置的limit大小（可配置），它會被編譯成base64，從而在實際項目中減少http請求，放置在src/assets目錄有以下幾點好處：
- 腳本和樣式表被縮小並捆綁在一起以避免額外的網絡請求。
- 缺少文件會導致編譯錯誤，而不是用戶的404錯誤。
- 結果文件名包含內容哈希，因此您無需擔心瀏覽器緩存舊版本。
當然，在實際項目中，公共文件夾public還是有它的作用的，如果你希望你的文件不被編譯，比如jquery.min.js，或者壓縮好的js插件等，你就可以把文件放在public文件夾中，這樣還可以減少文件構建時間，可以減少構建文件的大小。換過來想，如果你把所有靜態資源全部放在assets文件夾中，你會發現最後打包出來的文件很大，導致首頁白屏時間過長，所以，你可以把一些不會改動的靜態文件放到public中。
在React中使用公共文件夾public
如果在index.html中，你可以像這樣去使用它：
<img src="%PUBLIC_URL%/image/poster.jpeg" alt="">
只有前綴public可以訪問文件夾中的文件%PUBLIC_URL%。如果需要使用src或中的文件node_modules，則必須將其複製到那裏以明確指定將此文件作爲構建的一部分的意圖。
當運行npm run build，Create React App將替換%PUBLIC_URL%爲正確的絕對路徑，因此即使使用客戶端路由或將其託管在非根URL上，項目也會正常工作。
在JavaScript代碼中，可以process.env.PUBLIC_URL出於類似目的使用：
render() {
return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
}