2016-05-08 1 views
0

Я читал учебник, описывающий веб-пакет Reactjs и webpac dev. Но теперь я должен использовать экспресс в своем реальном проекте. Как я могу изменить сервер, или я могу просто добавить новый сервер с помощью экспресс, в этом случае, как я могу управлять двумя локальными хостами? вы можете увидеть мой webpack.config.js ниже.Как я могу изменить свой backend с текущего веб-сервера dev, чтобы выразить?

var debug = process.env.NODE_ENV !== "production"; 
 
var webpack = require('webpack'); 
 
var path = require('path'); 
 

 
module.exports = { 
 
    context: path.join(__dirname, "src"), 
 
    devtool: debug ? "inline-sourcemap" : null, 
 
    entry: "./app/main.js", 
 
    module: { 
 
    loaders: [ 
 
     { 
 
     test: /\.jsx?$/, 
 
     //test: /\.js?$/, 
 
     exclude: /(node_modules|bower_components)/, 
 
     loader: 'babel-loader', 
 
     query: { 
 
      presets: ['react', 'es2015', 'stage-0'], 
 
      plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'], 
 
     } 
 
     } 
 
    ] 
 
    }, 
 
    output: { 
 
    path: __dirname + "/src/", 
 
    filename: "index.js" 
 
    }, 
 
    plugins: debug ? [] : [ 
 
    new webpack.optimize.DedupePlugin(), 
 
    new webpack.optimize.OccurenceOrderPlugin(), 
 
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }), 
 
    ], 
 
};

Теперь я построил сервер курьерским, а также, что прислушивается к 3000:

var path = require('path'); 
 
var express = require('express'); 
 
var bodyParser = require('body-parser'); 
 

 
var app = express(); 
 

 
app.set('port', (process.env.PORT || 3000)); 
 

 
app.use('/', express.static(path.join(__dirname, 'public'))); 
 
app.use(bodyParser.json()); 
 
app.use(bodyParser.urlencoded({extended: true})); 
 

 
app.listen(app.get('port'), function() { 
 
    console.log('Server started: http://localhost:' + app.get('port') + '/'); 
 
});

мой WebPack DEV сервер имеет путь. /node_modules/.bin, и он прослушивает 8080. Вопрос в том, что я должен добавить в выражение f ile взять сервер webpack dev. Или, если вы думаете, что я могу их комбинировать, как мне следует действовать в выражении в этом случае? Благодаря!

+0

Вы можете начать свой экспресс-сервер, как обычно, с помощью 'узла server.js' и есть клиент подключения к порту 3000 и направить все API вызовы к экспресс-сервер. – Kannaj

+0

Так что мне больше не нужно заботиться о веб-сервере dev? Этот сервер webpack dev предназначен для автоматической перекомпиляции сервера, если произошли какие-либо изменения. возможно, я мог бы сделать то же самое с nodemon для прямого выражения? извините за мой вопрос о новичке :) –

+0

PLS Посмотрите на документы webpack-dev-middleware и webpack-hot-middleware. вам нужны те. вы можете найти примеры из примеров [примеров] от redux (https://github.com/reactjs/redux/tree/master/examples) –

ответ

0

вы можете комбинировать выразить с WebPack-DEV-промежуточного слоя

var path = require('path'); 
var express = require('express'); 
var webpack = require('webpack'); 
var config = require('./webpack.config.dev'); 

var app = express(); 
var compiler = webpack(config); 

app.use(require('webpack-dev-middleware')(compiler, { 
    noInfo: true, 
    publicPath: config.output.publicPath 
})); 

app.get('*', function(req, res) { 
    res.sendFile(path.join(__dirname, 'index.html')); 
}); 

app.listen(3000, function(err) { 
    if (err) { 
    console.log(err); 
    return; 
    } 

    console.log('Listening at http://localhost:3000'); 
}); 
+0

спасибо человеку! Но мне интересно, могу ли я сделать перекомпиляцию автосервисом с помощью express, почему я должен использовать сервер webpack dev? –

+0

Не уверен, что я правильно понял. Вам нужна такая функция, как горячая перезагрузка? Вы можете взглянуть на [этот проект] (https://github.com/gaearon/react-transform-boilerplate), он использует экспресс с dev-middleware для связывания и горячего промежуточного ПО для горячей перезагрузки. – Steffen

+0

Но я могу использовать nodemon вместо горячей перезагрузки? они работают аналогичным образом? –