小编Con*_*nan的帖子

我正在创建一个 React 组件，它随机循环显示大量背景图像。根据我的理解，我可以在这里忽略 Webpack，而只是动态生成 require/import 语句并将它们传递给组件。

但是，如果我希望 Webpack 使用加载器并生成哈希等 - 我还没有找到解决方案。

这个问题是类似的，但回答没有解决这个问题： Dynamically Add Images React Webpack

我当前的解决方案只需要组件中的所有图像 - 但是，我想知道这样做的“成本”是多少 - 只是增加了包大小？附件是示例代码来演示我的意思：

import React from 'react';
import styles from './Background.css';

const pic0 = require('./imgs/0.jpg');
const pic1 = require('./imgs/1.jpg');
const pic2 = require('./imgs/2.jpg');
const pic3 = require('./imgs/3.jpg');
// etc etc etc

class Background extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      pic: {},
    };
    this.changeBackground = this.changeBackground.bind(this);
  }

  componentWillMount() {
    this.setState({ pic: pic0 });
  }

  componentDidMount() {
    // set timeout …