WebPack热加载中间件错误

Question

我有一个非常准确的express/webpack设置，并遵循说明使用webpack-hot-middleware，但是，每当我运行服务器时，我都会收到一系列警告和错误消息，引用node_modules我不知道需要与错误的常见终点合作，因为它是对@./app @multi node ./app.js的引用，这可能与我的config.js中的多输入设置有关，而不是缺少模块？

错误示例：

WARNING in ./node_modules/terser-webpack-plugin/dist/worker.js 12:130-137
Critical dependency: require function is used in a way in which dependencies cannot be statically extracted
 @ ./node_modules/terser-webpack-plugin/dist/TaskRunner.js
 @ ./node_modules/terser-webpack-plugin/dist/index.js
 @ ./node_modules/terser-webpack-plugin/dist/cjs.js
 @ (webpack)/lib/WebpackOptionsDefaulter.js
 @ (webpack)/lib/webpack.js
 @ ./app.js
 @ multi node ./app.js
 ｢wdm｣: Failed to compile.

这是我的 config.json在节点v10.16.0＆amp;NPM 6.9.0

{
  "name": "express-react-boilerplate",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.19.0",
    "cookie-parser": "^1.4.4",
    "express": "^4.17.1",
    "morgan": "^1.9.1",
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  },
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "babel-loader": "^8.0.6",
    "webpack": "^4.38.0",
    "webpack-cli": "^3.3.6",
    "webpack-dev-middleware": "^3.7.0",
    "webpack-dev-server": "^3.7.2",
    "webpack-hot-middleware": "^2.25.0"
  }
}

我的 webpack.config.js ：

var webpack = require('webpack');
module.exports = {
    //Entry
    context: __dirname,
    entry: {
        app: [
            "webpack-hot-middleware/client",
            "./app.js"
        ]
    },
    mode: 'development',
    //Output
    output: {
        path: __dirname + "/dist",
        filename: "bundle.js"
    },
    //Loaders
    module: {
        rules: [
            { test: /.js$/, exclude: /node_modules/, use: "babel-loader" },
        ],
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
}

和 app.js

var express = require('express');
var path = require('path');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var webpackHotMiddleware = require('webpack-hot-middleware');
var webpackConfig = require('./webpack.config');
const compiler = webpack(webpackConfig);
var app = express();
var port = 3000;
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
console.log(process.env.NODE_ENV)
app.get('/', function(req, res){
    res.send('Test')
})
//Enable "webpack-dev-middleware"
app.use(webpackDevMiddleware(compiler, {
    noInfo: true,
    publicPath: webpackConfig.output.publicPath
}));
//Enable "webpack-hot-middleware"
app.use(webpackHotMiddleware(compiler));
app.listen(port, () => {
    console.log('Server started on port:' + port);
});

module.exports = app;

缺少node_modules的列表，但我不认为这是问题：

aws-sdk, child_process, fs指向各种node_module文件夹，这些文件夹很可能是通过特定软件包安装的

Answer 1

在阅读有关相关问题的GitHub问题后，我通过添加target: node来告诉WebPack，告诉WebPack这是在Nodejs环境中运行的，并避免构建内置节点模块，然后添加告诉WebPack避免所有外部节点模块的模块webpack-node-externals。不确定这是需要运行中间件的要求，但对我有用！