javascript - Webpack 版本 5.1.2 "MainTemplate.hooks.startup has been removed"出错

Question

我在教程中看到的 ReactJS + Webpack + Express 有问题。
在我完成以下文件的设置后:

server.js

webpack.config.js

.babelrc

包.json

尝试在 VS Code 中运行服务器后 bash终端。我得到以下输出: Error: MainTemplate.hooks.startup has been removed (use RuntimeGlobals.startup instead) at Object.tap这是上述所有文件的代码
server.js:

    import express from 'express';
    import webpack from 'webpack';
    import WebpackDevMiddleware from 'webpack-dev-middleware';
    import webpackConfig from '../webpack.config';

    // init packages
    const app = express();

    // set server
    app.set('port', process.env.PORT || 8080);

    // middleware
    app.use(WebpackDevMiddleware(webpack(webpackConfig)));

    // routes
    app.get('/', (request, response) => {
        response.send('Hello, user');
    });

    app.get('/demo', (request, response) => {
        response.json({demo: 'Hello, demo user' });
    });

    // listen on port
    app.listen(app.get('port'), () => {
        console.log('server on port ', app.get('port'));
    });

webpack.config.js:

    import webpack from 'webpack';
    import htmlWebpackPlugin from 'html-webpack-plugin';
    import LiveReloadPlugin from 'webpack-livereload-plugin';

    export default {
        entry: './src/client/index.js',
        output: {
            path: '/',
            filename: 'bundle.js'
        },
        module: {
            rules: [
                {
                    use: 'babel-loader',
                    test: /\.js$/,
                    exclude: /node_modules/
                },
                {
                    use: ['style-loader', 'css-loader'],
                    test: /\.css$/
                },
                {
                    test: /\.scss$/,
                    use: [
                        { loader: 'style-loader' },
                        {
                            loader: 'css-loader',
                            options: { sourceMap: true }
                        },
                        {
                            loader: 'sass-loader',
                            options: { sourceMap: true }
                        }
                    ]
                }
            ]
        },
        plugins: [
            new htmlWebpackPlugin({ template: './src/client/index.html' }),
            new LiveReloadPlugin()
        ],
    }

.babelrc:

    {
        "presets": [ "env", "react" ]
    }

包.json:

    {
      "name": "nodejs-practice",
      "version": "1.0.0",
      "description": "NodeJS Practice with React, MongoDB and NodeJS",
      "main": "main.js",
      "scripts": {
        "dev": "nodemon --exec babel-node src/server.js",
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "devDependencies": {
          "babel-cli": "^6.26.0",
          "babel-core": "^6.26.3",
          "babel-loader": "^8.1.0",
          "babel-preset-env": "^1.7.0",
          "babel-preset-react": "^6.24.1",
          "css-loader": "^5.0.0",
          "html-webpack-plugin": "^4.5.0",
          "node-sass": "^4.14.1",
          "nodemon": "^2.0.5",
          "sass-loader": "^10.0.3",
          "style-loader": "^2.0.0",
          "webpack": "^5.1.2",
          "webpack-dev-middleware": "^3.7.2",
          "webpack-livereload-plugin": "^2.3.0"
      },
      "dependencies": {
          "express": "^4.17.1",
          "react": "^16.14.0",
          "react-dom": "^16.14.0"
      }
    }

我想知道问题可能是什么，因为我一直在寻找一些答案但找不到任何东西。
我认为我可能不得不降级几个依赖项。
谢谢。

Answer 1

这是因为webpack-livereload-plugin正在使用已弃用的 webpack API
这是issue跟踪如何修复它