如何將我的圖像文件夾結構包含在我的React應用程序中？

我希望你能幫助我。
當我運行webpack時，我的應用程序被構建到dist文件夾中。

不幸的是，img文件夾不會被複制，所以我最終得到一個沒有圖像的應用程序。通過webpack實現這一點的正確方法是什麼，或者哪裏是開始的好地方？我看了一下webpack文檔，但不確定在哪裏看。如何將我的圖像文件夾結構包含在我的React應用程序中？

webpack.config.js文件下

const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const sass = require('node-sass'); 
const path = require('path'); 

const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({ 
    template: './index.html', 
    filename: 'index.html', 
    inject: 'body' 
}) 

module.exports = { 
    entry: './index.js', 
    output: { 
    path: path.resolve(__dirname, "dist"), 
    filename: 'bundle.js' 
    }, 
    module: { 
    rules: [ 
     { 
     test:/\.js$/, 
     exclude: /(node_modules)/, 
     use: { 
      loader: 'babel-loader', 
      options: { 
      presets:['env','react'] 
      } 
     } 
     }, 
     { 
     test: /\.scss$/, 
      use: [{ 
      loader: "style-loader" 
      }, { 
      loader: "css-loader" 
      }, { 
      loader: "sass-loader" 
      }] 
     } 
    ], 
    loaders: [ 
    { test: /\.json$/, loader: 'json' } 
    // other loaders 
    ] 
    }, 
    plugins: [HtmlWebpackPluginConfig] 
}

任何幫助深表感謝。
謝謝
萌

來源

2017-09-06 Moe-Joe

在裝載機的規則你的WebPack配置文件使用url-loader。裏面你的規則只是增加一個規則加載圖像：

{ 
    test: /\.(png|jpg|gif)$/, 
    use: [ 
     { 
     loader: 'url-loader', 
     options: { 
      limit: 8192 
     } 
    } ] 
}

還要安裝url-loader NPM包。

進行安裝：

npm install url-loader --save-dev

它將安裝的URL加載器可以轉換分辨圖像爲Base64字符串的路徑。如果文件大小小於8192字節則圖片url將被返回，否則如果文件大小大於限制則文件將直接通過file-loader使用。您可能還需要安裝文件加載器。

進行安裝：

npm install file-loader --save-dev

來源

2017-09-06 11:22:34 WitVault

謝謝你的輸入。您提供的語法是否缺少關閉']'和'}'或者它是否正確？ –

，加上適當的結束標籤。 –

@ Moe-Joe哦，是的，確實是錯字。感謝您指出。我更新了答案。 – WitVault

您應該加載圖像文件使用file-loader用的WebPack。只需通過npm安裝它並將它添加到裝載機上，你應該很好。你可以找到更多關於這個in the webpack documentation的信息。

好運

來源

2017-09-06 09:15:54

如何將我的圖像文件夾結構包含在我的React應用程序中？

回答

相關問題