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

Webpack热重装中间件错误

1 个答案: