React热更新自动添加iframe：一个行之有效的解决方案

2023-09-12 14:06:30

React作为一种热门的前端框架，凭借其虚拟DOM、组件化、单向数据流等优势，在Web开发领域广受欢迎。React的热更新功能更是深受开发者的喜爱，它允许我们在保存代码后立即在浏览器中看到更新，而无需重新加载整个页面。然而，在React项目中，我们可能会遇到一个问题：首次热更新时，即使项目编译成功，也会在document.body中添加一个iframe。这个问题可能会导致一些意料之外的行为，例如样式冲突、脚本错误等。

那么，如何解决React项目中首次热更新自动添加iframe的问题呢？我们可以通过以下步骤来解决这个问题：

安装react-app-rewired

首先，我们需要安装一个名为“react-app-rewired”的包。这个包可以帮助我们覆盖React项目中的默认Webpack配置。
```
npm install react-app-rewired --save-dev
```

创建config-overrides.js文件

接下来，我们需要在项目根目录下创建一个名为“config-overrides.js”的文件。在这个文件中，我们将覆盖Webpack的默认配置。

const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
  // 修复Babel导入的问题
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  // 添加对Less文件的支持
  addLessLoader({
    javascriptEnabled: true,
  }),
);

修改Webpack配置

在“config-overrides.js”文件中，我们需要修改Webpack的配置，以便它在首次热更新时不再添加iframe。

const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
  // 修复Babel导入的问题
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  // 添加对Less文件的支持
  addLessLoader({
    javascriptEnabled: true,
  }),
  // 修改Webpack配置，禁止在首次热更新时添加iframe
  (config) => {
    config.plugins.forEach((plugin) => {
      if (plugin.constructor.name === 'HtmlWebpackPlugin') {
        plugin.options.chunksSortMode = 'none';
      }
    });
    return config;
  },
);