May Webpack可以處理目錄中的所有圖像而不需要它們嗎？

Question

我正在使用ReactJS創建一個網站，並使用Webpack捆綁它。

我的一個組件只是一個帶圖像的列（徽標）。 現在大約有15張圖像被隨機顯示，但這個數字肯定會隨着時間的推移而增加。

當然，如果我要對它們進行硬編碼，那將是非常糟糕的，例如：

import image01 from './logos/01.png';
import image02 from './logos/02.png';
import image03 from './logos/03.png';
.
.
.

每次我必須添加新圖像時，它都意味着更改代碼。

我這樣做：

logos.jsx

import React from 'react';
import './logos.css';

export default class Logos extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      logos: null
    }
  }

  componentWillMount() {
    fetch('/random_logos')
    .then(res => res.json())
    .then(json => {
      this.setState({
        logos: json.logos
      });
    });
  }

  render() {
    return (
      <div className="logos">
        // code to display the logos in a column
      </div>
    );
  }
}

這將從后端獲取可用徽標的隨機列表，並使其可用於組件。

碰巧我的代碼在我剛剛npm start執行npm start ，但是當我用Webpack捆綁所有內容時， my/application/dir/src/logos/logos文件不被Webpack移動到正確的目錄，這將是my/application/dir/resources/images/logos ，因為它們沒有導入！

有沒有辦法告訴Webpack處理某個目錄下的文件而不需要在我們的代碼中專門處理它們？ 或者我必須創建一個scritp來將這些文件復制到我的生產目錄中？

這是我的Webpack配置：

webpack.config.js

var path = require('path');

module.exports = {
    entry: path.resolve(__dirname, 'fe/src/') + '/index.jsx',
    output: {
        path: path.resolve(__dirname, 'public/js'), 
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: [ "node_modules" ],
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'react','stage-0']
                }
            },
            {
                test: /\.css$/, loader: "style-loader!css-loader"
            },
            {
                test: /\.(jpe?g|png|gif|bmp|svg|ico)$/i,
                use: 'file-loader?name=[name].[ext]&outputPath=resources/images/'
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                loader: 'file-loader?name=resources/fonts/[name].[ext]'
            }
        ]
    }
}

如果我有五個名為01.png ， 02.png ， 03.png ， 04.png和05.png ，我的后端會返回一個像這樣的JSON：

{
  "logos": [
    "05.png",
    "03.png",
    "01.png",
    "02.png",
    "04.png"
  ]
}

Answer 1

我建議使用https://github.com/kevlened/copy-webpack-plugin 。 只需將插件添加到您的webpack配置中，如：

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  ...,
  plugins: [
    new CopyWebpackPlugin([
        { from: '...', to: '...' }
    ])
  ]
}

然后只需從正確的文件夾中引用您的徽標即可。