Webpackバンドルエクスプレスアプリの閲覧に失敗しました

Question

私はnpm run startを実行しており、サーバーは正常に動作しています。私はlocalhostでクライアントを表示しようとすると、サーバーがエラーを返します。 GET/500 62.700ミリ秒 - 2028 エラー：「/ビュー」ビューディレクトリ内のビューを検索する

を「エラー」失敗しただけのソースを使用すると、アプリケーションが正常に動作しますファイル。このエラーは、webpackバンドルからアプリケーションを実行しているときに発生します。

このエラーが発生するソースファイルとバンドルファイルの違いは何ですか？

• NPM：3.8.2
• ノード：4.2.6
• エクスプレス：4.13.1
• のWebPACK：1.12.13
• バベルローダ：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ファイルでの生産・エラー・ハンドラによって処理されていることを私に語った：

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

ビューエンジンのセットアップ：私は次の出力との誤差をCONSOLE.LOG

// 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: {} 
    }); 
}); 

私はデバッグを開始するかどうかはわかりません

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

...

Answer 1

答えはwebpackが特別な__dirnameグローバル変数をどのように扱うかにあると思います。 Webpackのデフォルトの動作は__dirnameを "模擬"値/に置き換えることです。これはrootが/viewsで、./viewsではなく、ファイルを探している場所からエラーが発生した場合に表示されます。

ソリューションはWebPACKの構成に次のセクションを追加することです：https://webpack.github.io/docs/configuration.html#node