Webpack + React + Typescript 的 ELIFECYCLE 错误

如何解决Webpack + React + Typescript 的 ELIFECYCLE 错误

对于使用 Webpack 捆绑模块非常陌生，但可以尝试一下。我有一个非常简单的项目，我正在尝试将其打包以显示它。运行构建脚本给了我一个神秘的错误：

$ npm run build

> react-extension-from-scratch@1.0.0 build /path/to/react-extension-from-scratch
> webpack --mode production

[webpack-cli] Compilation finished
assets by status 126 KiB [cached] 2 assets
orphan modules 196 bytes [orphan] 1 module
modules by path ./node_modules/ 133 KiB
  modules by path ./node_modules/react/ 6.48 KiB
    ./node_modules/react/index.js 190 bytes [built] [code generated]
    ./node_modules/react/cjs/react.production.min.js 6.3 KiB [built] [code generated]
  modules by path ./node_modules/react-dom/ 119 KiB
    ./node_modules/react-dom/index.js 1.33 KiB [built] [code generated]
    ./node_modules/react-dom/cjs/react-dom.production.min.js 118 KiB [built] [code generated]
  modules by path ./node_modules/scheduler/ 4.91 KiB
    ./node_modules/scheduler/index.js 198 bytes [built] [code generated]
    ./node_modules/scheduler/cjs/scheduler.production.min.js 4.72 KiB [built] [code generated]
  ./node_modules/object-assign/index.js 2.06 KiB [built] [code generated]
./src/index.tsx + 1 modules 453 bytes [built] [code generated]
1 ERROR in child compilations
webpack 5.11.0 compiled with 1 error in 2831 ms
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! react-extension-from-scratch@1.0.0 build: `webpack --mode production`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the react-extension-from-scratch@1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /path/to/logfile.log

以下是我的 Webpack 配置：

import path from 'path';
import webpack from 'webpack';
const copyPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const config: webpack.Configuration = {
  context: __dirname,devServer: {
    contentBase: './src',historyApiFallback: true,},entry: {
    app: './src/index.tsx',resolve: {
    extensions: ['.tsx','.ts','.js'],module: {
    rules: [
      {
        test: /\.html$/,use: ['html-loader'],{
        test: /\.(ts|js)x?$/,exclude: /node_modules/,use: {
          loader: 'babel-loader',options: {
            presets: ['@babel/preset-env','@babel/preset-react','@babel/preset-typescript'],],plugins: [
    new CleanWebpackPlugin(),new HtmlWebpackPlugin({
      template: path.resolve(__dirname,'src','index.html'),}),new copyPlugin({
      patterns: [{ from: './src/manifest.json',to: '[name].[ext]' }],output: {
    path: path.resolve(__dirname,'build'),filename: 'bundle.js',stats: {
    errorDetails: true,};

export default config;

奇怪的是，如果我从 template 的参数中删除 HtmlWebpackPlugin（但显然它没有将我想要的 index.html 文件添加到构建中），构建工作正常目录）。

就上下文而言，这个想法非常简单：在我的 src 目录中，我有一个 index.html 文件，其中有一个带有 id 的 div，我向其中注入了一些 React 代码。在构建它时，我想将 index.html 捆绑到构建目录中，并将其链接到生成的 bundle.js 文件，以便 React 代码立即运行。我知道我可以使用 copyWebpackPlugin 来实现这一点，但必须手动将 bundle.js 包含在其中，这对于这个玩具项目来说很好，但对于更复杂的项目不想这样做。

有人有想法吗？