Question

自从配置'webpack-dev-middleware'开始尝试启动节点服务器时，我收到奇怪的警告/错误，而且我似乎无法弄清设置及其与expressjs交互的问题。我正在使用express-generator生成Express项目。

Node: v8.10.0
NPM: 5.6.0
Webpack: 4.29.6
Webpack-Cli: ^3.3.0

这是我采取的步骤：

1）跑了npm start（node ./bin/www）

2）花费了不可思议的长时间运行：

> exp@0.0.0 start /Users/user/Desktop/Projects/node/exp
> node ./bin/www

ℹ ｢wdm｣: wait until bundle finished: /
GET / - - ms - -
✖ ｢wdm｣: Hash: 0034678769cffd379a9c
Version: webpack 4.29.6
Time: 137790ms

3）

Built at: 2019-03-22 15:31:58
    Asset   Size  Chunks  Chunk Names
bundle.js  3 MiB       0  app
Entrypoint app = bundle.js
   [1] external "path" 42 bytes {0} [built]
   [6] ./node_modules/inherits/inherits.js 192 bytes {0} [built]
   [9] (webpack)/lib/Template.js 7.96 KiB {0} [built]
  [26] ./node_modules/debug/src/index.js 263 bytes {0} [built]
  [70] ./node_modules/http-errors/index.js 5.62 KiB {0} [built]
 [177] ./node_modules/express/index.js 224 bytes {0} [built]
 [276] (webpack)/lib/webpack.js 7.71 KiB {0} [built]
 [507] ./app.js 1.49 KiB {0} [built]
 [566] ./node_modules/cookie-parser/index.js 3.32 KiB {0} [built]
 [567] ./node_modules/morgan/index.js 9.96 KiB {0} [built]
[1289] (webpack)-dev-middleware/index.js 2.32 KiB {0} [built]
[1304] (webpack)-hot-middleware/middleware.js 4.7 KiB {0} [built]
[1306] ./webpack.config.js 723 bytes {0} [built]
[1307] ./routes/index.js 205 bytes {0} [built]
[1308] ./routes/users.js 203 bytes {0} [built]
    + 1295 hidden modules

4）然后我看到如下警告：

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

和类似错误：

ERROR in ./node_modules/fsevents/node_modules/node-pre-gyp/lib/info.js
Module not found: Error: Can't resolve 'aws-sdk' in '/Users/user/Desktop/Projects/node/exp/node_modules/fsevents/node_modules/node-pre-gyp/lib'

这是我的webpack.config.js：

const webpack = require('webpack');
const path = require('path');
module.exports = {
    entry: {
        app: './app.js'
    },
    output: {
        path: path.resolve(__dirname, "./public"),
        filename: "bundle.js",
        publicPath: "/"
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            }
        ]
    },
    target: 'node'
};

这是我的app.js：

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
const webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var webpackHotMiddleware = require('webpack-hot-middleware');
const webpackConfig = require('./webpack.config');
const compiler = webpack(webpackConfig);

var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use(webpackDevMiddleware(compiler,{
  publicPath: webpackConfig.output.publicPath
}));

app.use('/', indexRouter);
app.use('/users', usersRouter);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});


module.exports = app;

Webpack开发中间件无法编译模块问题

0 个答案: