Webpack捆绑式快递应用无法查找视图

Question

我跑npm run start,服务器运行正常.当我尝试查看客户端时localhost,服务器返回错误:GET/500 62.700 ms - 2028错误:无法在视图目录"/ views"中查找视图"错误"

只使用源文件时,应用程序运行正常.从webpack bundle运行应用程序时发生此错误.

导致此错误的源文件和捆绑文件之间有什么区别？

• 故宫:3.8.2
• 节点:4.2.6
• 表达:4.13.1
• webpack:1.12.13
• babel-loader:6.2.4

webpack.config.js

var webpack = require('webpack');
var path = require('path');

var nodeModules = {};
fs.readdirSync('node_modules')
  .filter(function(x) {
    return ['.bin'].indexOf(x) === -1;
  })
  .forEach(function(mod) {
    nodeModules[mod] = 'commonjs ' + mod;
  });

module.exports = [
  {
    entry: {
      'app_bundle': './server.js'
    },
    target: 'node',
    query: {
      cacheDirectory: true,
      presets: ['es2015']
    },
    module: {
      loaders: [
        {
          test: /\.js$/,
          loader: 'babel',
          exclude: /node_modules/
        }
      ]
    },
    resolve: {
      extensions: ['', '.js']
    },
    output: {
      path: './',
      filename: '[name].js'
    },
    externals: nodeModules
  },
  {
    entry: [
      './src/index.jsx'
    ],
    target: 'web',
    query: {
      cacheDirectory: true,
      presets: ['es2015']
    },
    module: {
      loaders: [
        {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel'
        },
        {
          test: /\.css$/,
          loader: 'style!css!autoprefixer'
        },
        { test: /\.(woff|woff2)$/,  loader: "url-loader?limit=10000&mimetype=application/font-woff" },
        { test: /\.ttf$/,    loader: "file-loader" },
        { test: /\.eot$/,    loader: "file-loader" },
        { test: /\.svg$/,    loader: "file-loader" }
      ]
    },
    resolve: {
      alias: {
        'react': path.join(__dirname, 'node_modules', 'react')
      },
      extensions: ['', '.js', '.jsx']
    },
    output: {
      path: __dirname + '/public',
      publicPath: '/',
      filename: 'webpack_bundle.js'
    }
  }
];

错误跟踪告诉我错误正由我的app.js文件中的生产错误处理程序处理:

// production error handler
app.use(function(err, req, res, next) {
  console.log(err);
  res.status(err.status || 500);
  res.render('error', {
    message: err.message,
    error: {}
  });
});

我使用以下输出console.log错误:

{ [Error: Failed to lookup view "error" in views directory "/views"]
  view: 
   View {
     defaultEngine: 'ejs',
     ext: '.ejs',
     name: 'error',
     root: '/views',
     engine: [Function],
     path: undefined } }

查看引擎设置

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');

我不确定如何开始调试......

Answer 1

我相信答案在于webpack如何处理特殊的__dirname全局变量.Webpack的默认行为是替换__dirname为"mock"值/.这可以从快递那里得到它寻找的文件中的错误可以看到root的/views,不是./views.

解决方案是将以下部分添加到您的webpack配置中:

node: {
  __dirname: true
}

以下是解释此行为的文档:https: //webpack.github.io/docs/configuration.html#node