我在教程中看到的 ReactJS + Webpack + Express 有问题。
在我完成以下文件的设置后:
尝试在 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"
}
}
我想知道问题可能是什么,因为我一直在寻找一些答案但找不到任何东西。我认为我可能不得不降级几个依赖项。
谢谢。
最佳答案
这是因为webpack-livereload-plugin正在使用已弃用的 webpack API
这是issue跟踪如何修复它
关于javascript - Webpack 版本 5.1.2 "MainTemplate.hooks.startup has been removed"出错,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64382681/