Webpack 5生产构建React后onClick等事件全部失效如何解决

使用Webpack 5作为打包工具开发最小依赖的小型React应用时，遇到生产构建产物异常：

• 若index.html中未对构建生成的JS文件添加defer延迟加载属性，开发环境下所有功能运行完全正常
• 执行生产构建后，页面绑定的所有交互事件（onClick、onMouseOver等）全部无法触发
• 构建过程仅输出产物体积过大的警告，未抛出任何与事件失效相关的错误信息

相关代码 #

事件绑定组件 #

<div className='connectDiv'>
  <button className='btnConnect'
    onMouseOver={() => btnText('mouseOver')}
    onMouseOut={() => btnText('mouseOut')}
    onClick={() => aircallAPIping()}
    style={btnStyle}>
    {buttonText}
  </button>
</div>

事件处理函数 #

function btnText(action) {
    if(buttonText === 'Connected' && action === 'mouseOver') {
      setText('Disconnect');
      setStyle({backgroundColor:'orange',color:'white'});
    };     
    if(buttonText === 'Disconnect' && action === 'mouseOut') {
      setText('Connected');
      setStyle({backgroundColor:'green',color:'white'});
    };
    if(buttonText === 'Not Connected' && action == 'mouseOver') {
      setText('Connect');
      setStyle({backgroundColor:'orange',color:'white'});
    };
    if(buttonText === 'Connect' && action == 'mouseOut') {
      setText('Not Connected');
      setStyle({backgroundColor:'white',color:'#74787d'});
    };
  };

Webpack配置 #

src目录下同时存放App.js与main.js两个文件，当前构建配置如下：

const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  entry: [ "@babel/polyfill", path.resolve(__dirname, './src/main.js')],
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      {
        test: /\.(png|jp(e*)g|svg|gif)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: 'images/[hash]-[name].[ext]',
            },
          },
        ],
      },
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          { loader: 'css-loader' }
      ]
      },
      {
        test: /\.html$/,
        exclude: [/node_modules/, require.resolve('./public/index.html')],       
        use: [
          {
            loader: "html-loader",
            options: {
                name: '[name].[ext]'
            },
          }
        ]
      }
    ],
  },
  resolve: {
    extensions: ['*', '.js', '.jsx'],
  },
  output: {
    path: path.resolve(__dirname, './public'),
    filename: 'bundle.js',
    publicPath: '/'
  },
  devServer: {
    static: path.resolve(__dirname, './public'),
    historyApiFallback: true,
  },
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./public/index.html",
      filename: "./index.html"
    })
  ]
};

关于App.js与main.js的冲突疑问 #

二者不会导致事件失效。常规React项目结构中，main.js是应用入口文件，负责将React根组件挂载到真实DOM节点；App.js是业务根组件，二者职责分离，只要入口文件正确引入App组件就不会产生冲突。

问题根因 #

这是非常常见的脚本加载时序问题，和组件代码、压缩逻辑无关：

• 开发环境下webpack-dev-server会自动处理bundle的加载时机，保证DOM解析完成后再执行React挂载逻辑，因此即使不手动加defer也能正常运行
• 生产构建时，HtmlWebpackPlugin默认将注入的脚本标签放在<head>内，未配置defer/async、也未指定注入位置到body末尾时，脚本会在DOM树还未解析完成时就执行
• 此时React执行挂载逻辑时找不到目标根DOM节点，或挂载到未渲染完成的节点上，后续组件渲染时的事件绑定自然全部失效。Terser压缩过程不会改变脚本执行时序，因此构建阶段不会抛出相关错误。

构建时的产物体积过大警告和事件失效无关，原因是配置中使用的@babel/polyfill会全量注入所有ES特性兼容代码，对于小型React应用来说冗余度极高。

修复方案 #

不需要手动在HTML模板中硬编码defer属性，直接修改HtmlWebpackPlugin配置即可让插件自动生成符合要求的脚本标签：

plugins: [
  new HtmlWebPackPlugin({
    template: "./public/index.html",
    filename: "./index.html",
    scriptLoading: 'defer', // 自动为注入的script标签添加defer属性
    // 也可选择配置inject: 'body'直接将脚本注入到body末尾，两种方案二选一即可
  })
]

额外优化建议 #

• 替换已废弃的@babel/polyfill，在babel配置中开启useBuiltIns: 'usage'按需注入polyfill，可大幅降低构建产物体积
• 确认main.js中的React挂载逻辑正确，标准React 18挂载代码参考如下：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

• 检查public目录下的index.html模板，不要手动写死bundle.js的引用路径，避免和插件自动注入的脚本产生重复引用问题。

内容的提问来源于stack exchange，提问作者KoenV