小编심시은*_*심시은的帖子

我用以下命令创建了react项目：yarn create react-app。我正在使用webpack 4.29.6，反应16.8.6。

我想禁用代码拆分，因为我只想要build / static / js文件夹中的一个“ main.js”文件。（我已经从他们的名字中删除了哈希。）

我试过了：

new webpack.optimize.LimitChunkCountPlugin({
    maxChunks: 1
  }),

和

      splitChunks: {
        chunks: 'all',
        name: false,
        cacheGroups: {
          default:false
        }
      }

但是这些解决方案为我提供了以下文件：

build
  /static
   /js
   -2.chunk.js
   -2.chunk.js.map
   -main.chunk.js
   -main.chunk.js.map
   -runtime~main.js
   -runtime~main.js.map

我认为runtime〜main.js文件和.map文件都可以，但是我想要没有块，没有2.chunk.js的确切的“ main.js”文件。如何禁用webpack 4的默认代码拆分？

我每 3 秒更改一个 div 的 className（状态更改，使用 setInterval）。每个类别都有不同的背景图像。

我想在背景图像发生变化时使用过渡 CSS 淡入和淡出它们。我看到了一些更简单情况的示例，但是我有两个以上的元素需要更改/并通过状态更改来更改图片。

我怎样才能做到这一点？

我将代码上传到：https://stackblitz.com/edit/react-ubxffz 但我无法在此页面上上传图像，因此暂时将其替换为该页面中的背景颜色。

这是图像幻灯片组件。

const imgUrls = [
    1,2,3
];

class ImageSlide extends Component {

render() {
    const { url } = this.props;
    const Text=...
    return (          
        <div>
            <div className={`pic${url}`}>
                <p className="p1_1">{Text.p1_1}</p>
            </div>
        </div>      
    );
}

这是App组件，它调用ImageSlide。

class App extends Component {
constructor (props) {
    super(props);
        currentImageIndex: 0,
    };
}

// ...

componentDidMount() {
    this.interval = setInterval(() => {
        this.nextSlide(); //this function change the index state. 
        }, 3000);   
} …