webpack圖像公用文件夾

Question

爲了開始使用react，我將Webpack和Babel添加到了我的節點應用程序中。 我進口我所有的腳本，以一種文字和webpack.config.js設置爲入口，看起來像這樣：

module.exports = { 

entry: './src/App.js', 
output: { 
    path: __dirname, 
    filename: 'app.js' 
}, 
module: { 
    loaders: [{ 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loader: 'babel', 
     query: { 
      presets: ['es2015', 'react'] 
     } 
    }] 
} 

}; 

開始的WebPack-dev的服務器時，腳本無法找到位於images我公用文件夾（它被指向服務器index.js中的靜態文件夾）。我嘗試在輸出中添加 - publicPath：「/ public /」，但它甚至找不到app.js。在Webpack中使用我的圖像的最佳方式是什麼？

Answer 1

只要把它們放在你的源代碼目錄，並要求它們！

的src/exampleImage.jpg =您的圖像

的src/ExampleImage.js：

import React from 'react'; 
import imageUrl from './exampleImage.jpg'; 

export default class ExampleImage extends React.Component { 
    render() { 
    return <img src={imageUrl} />; 
    } 
} 

添加正確的加載到你的裝載機陣列（不要忘記npm install file-loader）：

{ 
    test: /\.(jpg|png|gif)$/, 
    loaders: ['file'], 
    } 

你完成了！ Webpack會自動將圖像複製到正確的目錄（您的內置腳本將在此處），並確保imageUrl正確且可行。

酷炫的好處：您可以使用image-webpack-loader自動縮小圖像，並使用文件加載器進行自動文件名散列以進行長期緩存。只需檢查他們的文件以獲取更多信息！