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 和 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这是在nodejs环境中运行并避免构建内置节点模块，然后添加模块webpack-node-externals告诉 webpack 避免所有外部节点模块。不确定运行中间件是否需要这样做，但它对我有用！