在使用WebPack進行開發期間提供靜態資產

Question

我是WebPack和React的新手，並且遇到了讓我的設置正確的問題。

我的目錄結構是：

/project/ 
    /src/ 
    index.html 
    app.js 
    /static/ 
    /images 

我的「輸出」的WebPack配置部分：

output: { 
    filename: 'bundle.js', 
    path: path.join(__dirname, 'dist') 
}, 

我的應用程序做出反應運行正常，但我沒有得到任何圖像處理URL作爲服務例如：

<img src="/static/images/logo.jpg" /> 

如果更改圖像src值：

<img src="/src/static/images/logo.jpg" /> 

他們工作，但當然，生產中不會出現這種情況，因爲/src/目錄不會被部署。看來我的根設置不正確。

我需要告訴WebPack將「靜態」目錄複製到「dist」嗎？要麼？建議感激。

Answer 1

一些挖後，我其實想要的是：https://webpack.github.io/docs/webpack-dev-server.html#content-base

然後我修改我的NPM啓動腳本：

"./node_modules/.bin/webpack-dev-server --hot --inline --progress --content-base src/" 

現在相對圖像路徑又是幸福的。

Answer 2

您可以使用webpack將import（或require）圖像。

添加file-loader到的WebPack配置（確保file-loader安裝）：

{ 
    test: /\.(png|gif|jpg)$/, 
    include: [ 
    path.join(__dirname, 'static') 
    ], 
    loader: 'file', 
} 

然後，您可以import圖像：

import Image1 from '../static/images/image1.png'; 

，並使用它像這樣：

<img src={Image1} width="64" height="64" /> 

Webpack會將所有導入的圖像放入「dist」 目錄。