反应不附加事件监听器

更新：关于output从webpack配置中删除条目的某些操作使React事件侦听器能够正常运行。

我正在开发React / TypeScript应用程序，并第一次手动滚动webpack配置。

出于某种原因，似乎所有的React渲染行为都按预期运行，但没有事件侦听器被附加到React组件上。

在这一点上，我很沮丧，在网上搜索时，我看不到有人遇到类似问题。

我的webpack设置非常简单且基本，并且似乎遵循了两个webpack列出的指南以及所描述的适当文章。

我在项目中唯一不常见的行为是使用TsConfigPathsPlugin插件解析路径别名。

作为参考，所有内容都可以在构建服务器和开发服务器上成功编译，并且可以按预期正确地渲染（类似地，路径别名解析显然可以正常工作）。在构建时或运行时都不会引发任何错误或警告。

可能的线索不大：我确实注意到webpack开发服务器两次注销“启用实时重载”，并且用于chrome的React开发工具标识了呈现到页面的单个组件的两个实例。

下面，我列出了小型应用程序中包含的组件以及构建配置。让我知道是否还有其他文件有用。

index.tsx

import React from 'react'
import { render } from 'react-dom'

import { ENTRY_ELEMENT_ID } from './configs'

import Test from '~ui/app/Test'

render(
    <Test />,
    document.querySelector(`#${ENTRY_ELEMENT_ID}`)
)

测试文件

import React from 'react'

function Test() {
    return (
        <button onClick={() => { console.log('Clicked!') }}>Test</button>
    )
}

export default Test

需要明确的是，此onClick事件永远不会执行

webpack.common.js

const { TsConfigPathsPlugin } = require('awesome-typescript-loader')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = {
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                loader: 'awesome-typescript-loader',
            }
        ]
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js'],
        plugins: [
            new TsConfigPathsPlugin()
        ]
    },
    plugins: [
        new CleanWebpackPlugin()
    ]
}

webpack.ui.dev.js

const { merge } = require('webpack-merge')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const commonConfig = require('./webpack.common')

const { DISTRIBUTION_ROOT, UI_ROOT } = require('./path-helpers')

module.exports = merge(commonConfig, {
    entry: `${UI_ROOT}/index.tsx`,
    output: {
        path: `${DISTRIBUTION_ROOT}/ui`,
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"]
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2|png)$/i,
                type: 'asset/resource'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: `${UI_ROOT}/index.html`
        })
    ]
})

tsconfig.json

{
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "jsx": "react",
        "module": "commonjs",
        "noImplicitAny": true,
        "esModuleInterop": true,
        "preserveConstEnums": true,
        "removeComments": true,
        "target": "ES5",
        "strict": true,
        "strictNullChecks": true,
        "alwaysStrict": true,
        "baseUrl": ".",
        "paths": {
            "~ui/*": ["apps/ui/*"],
            "~script/*": ["apps/script/*"]
        }
    },
    "include": [
        "./apps/"
    ],
    "exclude": [
        "node_modules",
        "dist"
    ]
}