使用 webpack / react / gatsby 动态导入和热重载答案

【问题标题】：Dynamic imports and hot reload with webpack / react / gatsby使用 webpack / react / gatsby 动态导入和热重载
【发布时间】：2020-01-11 15:55:24
【问题描述】：

我正在使用框架 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克隆存储库 -npm 我 - 盖茨比开发

感谢您的帮助。

【问题讨论】：

点赞只是为了方便复制，最近很少见
会不会是生命周期方法的问题？据我所知，componentDidMount 在初始渲染时只被调用一次。

标签： javascript webpack gatsby dynamic-import hot-reload

【解决方案1】：

在尝试了很多东西后，包括 wsl、npm clenaup 等，我意识到我的杀毒软件 sophos 阻止了 webpack 热重载套接字 __webpack_hmr。

我所要做的就是暂时禁用防病毒软件。（您可以随意卸载它或更换另一个）。

【讨论】：