使用 webpack/react/gatsby 進行動態導入和熱重載

Question

我正在使用 gatsby 框架開發一個小網站，但是我在動態導入和 webpack 提供的熱重載方面遇到了困難。

這是我的反應組件：

import React from 'react'

import styles from './_frame.module.scss'

class Frame extends React.Component {
  constructor(props) {
    super(props);
    this.frame = React.createRef();
  }

  render() {
    return (
      <div className={styles.frame}
           ref={this.frame}>
        <div className="inner wrap--redux">
          <canvas className={styles.canvas}
                  id="canvas"
                  width="800"
                  height="600">
          </canvas>
        </div>
      </div>
    );
  }

  componentDidMount() {
    import(`../../experiments/${this.props.slug}`)
      .then(res => {
        new res.default(this.frame.current);
      });
  }
};
export default Frame

我希望當我對導入的 JavaScript 進行修改時，熱重載會觸發並刷新我的組件。 目前我必須手動刷新瀏覽器以觀察所做的更改。

您可以在此處查看整個存儲庫： https : //github.com/maximeparisse/webgl-journey

以及從中提取代碼的文件： https : //github.com/maximeparisse/webgl-journey/blob/master/src/components/experiments/frame.js

如果你只想復制 - git clone the repository - npm i - gatsby develop

謝謝你的幫助。

Answer 1

在嘗試了很多事情之后，包括 wsl、npm clenaup 等，我意識到我的殺毒軟件sophos正在阻止 webpack 熱重載套接字__webpack_hmr 。

我所要做的就是暫時禁用防病毒軟件。 （您可以隨意卸載它或更換另一個）。