React使用公共資料夾public(轉)
文章地址: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'} />;
}