Webpack gói ứng dụng express không hiển thị giao diện

Question

Tôi chạy npm run start và máy chủ đang chạy tốt. Khi tôi cố gắng để xem khách hàng tại localhost, máy chủ trả về lỗi: GET/500 62,700 ms - 2028 Lỗi: Không thể tra cứu xem "lỗi" trong thư mục quan điểm "/ views"

Ứng dụng này chạy tốt khi chỉ sử dụng nguồn các tập tin. Lỗi này xảy ra khi chạy ứng dụng từ gói webpack.

Sự khác nhau giữa các tệp nguồn và tệp được gộp sẽ làm cho lỗi này xảy ra là gì?

• NPM: 3.8.2
• nút: 4.2.6
• nhanh: 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' 
    } 
    } 
]; 

Dấu vết lỗi cho tôi rằng lỗi đã được xử lý bởi các xử lý lỗi sản xuất trong app.js tập tin của tôi:

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

tôi console.log lỗi với đầu ra sau đây:

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

Xem động cơ thiết lập

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

tôi không chắc chắn làm thế nào để bắt đầu gỡ lỗi ...

Answer 1

Tôi tin câu trả lời nằm trong cách webpack xử lý biến toàn cầu đặc biệt __dirname. Hành vi mặc định của Webpack là thay thế __dirname bằng giá trị "giả" /. Điều này có thể được nhìn thấy trong lỗi bạn nhận được từ chuyển phát nhanh nơi bạn tìm kiếm tệp tại số root của /views, không phải là ./views.

Giải pháp là để thêm phần sau đây để cấu hình webpack của bạn:

node: { 
    __dirname: true 
} 

Dưới đây là các tài liệu mà giải thích hành vi này: https://webpack.github.io/docs/configuration.html#node