使用 webpack-dev-server 运行 node express 服务器

Question

我正在使用 webpack 使用以下配置成功运行我的反应前端：

 {
    name: 'client',
    entry: './scripts/main.js',
    output: {
        path: __dirname,
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query:{
                    presets: ['es2015', 'react', 'stage-2']
                }
            }
        ]
    }
}

我也在尝试建立一个 node.js express 后端，并且也想通过 webpack 运行它，这样我就有一个同时运行后端和前端的服务器，并且因为我想使用 babel 进行转译我的 JavaScript。

我做了一个看起来像这样的快速测试服务器：

 var express = require('express');
console.log('test');

var app = express();

app.get('/', function(req, res){
    res.send("Hello world from Express!!");
});

app.listen(3000, function(){
    console.log('Example app listening on port 3000');
});

如果我使用 node index.js localhost:3000 打开我的浏览器，它会打印“Hello world from Express!!”。到目前为止，一切都很好。然后我尝试为它创建一个 web-pack 配置：

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

module.exports = [
{
    name: 'server',
    target: 'node',
    entry: './index.js',
    output: {
        path: __dirname,
        filename: 'bundle.js'
    },
    externals: nodeModules,
    module: {
        loaders: [
            {
                test: /\.js$/,
                loaders: [
                    'babel-loader'
                ]
            },
            {
                test:  /\.json$/,
                loader: 'json-loader'
            }
        ]
    }
}

当我运行命令 webpack-dev-server 它成功启动（似乎）。但是，如果我现在在 localhost:3000 上访问我的浏览器，它只是说该网页不可用，就像服务器根本没有运行一样。

我对 node 和 webpack 都很陌生，所以要么我在某个地方犯了一个小错误，要么我已经走了;)

原文由 Øyvind Bråthen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Webpack-dev-server 非常适合客户端开发，但它不会部署 Express api 或中间件。所以在开发中，我建议运行两台独立的服务器：一台用于客户端，一台用于服务器端 api。

Nodemon npm install --save-dev nodemon 是一个很好的后端开发服务器，可以让你热重新部署你的 api，或者你可以只使用 express 并在你进行更改时重新启动。在生产中，客户端和 api 仍将由同一个 express 服务器提供服务。

在你的 package.json 中为 nodemon 和 webpack-dev-server 设置一个生命周期事件，以便于启动它们（例如： npm run dev-server ）。

 "scripts": {
   "start": "webpack --progress --colors",
   "dev-server": "nodemon ./server.js localhost 8080",
   "dev-client": "webpack-dev-server --port 3000",
}

或者，直接从节点运行 express：

 "scripts": {
   "start": "webpack --progress --colors",
   "dev-server": "node dev-server.js",
   "dev-client": "webpack-dev-server --port 3000",
}

 // dev-server.js
const express = require('express');
const app = express();
// Import routes
require('./_routes')(app);   // <-- or whatever you do to include your API endpoints and middleware
app.set('port', 8080);
app.listen(app.get('port'), function() {
    console.log('Node App Started');
});

注意：api 服务器必须使用与 webpack-dev-server 不同的端口。

最后，在您的 webpack-dev-config 中，您需要使用代理将对您的 api 的调用重定向到新端口：

 devServer: {
  historyApiFallback: true,
  hot: true,
  inline: true,

  host: 'localhost', // Defaults to `localhost`
  port: 3000, // Defaults to 8080
  proxy: {
    '^/api/*': {
      target: 'http://localhost:8080/api/',
      secure: false
    }
  }
},
// and separately, in your plugins section
plugins: [
  new webpack.HotModuleReplacementPlugin({
    multiStep: true
  })
]

**有一个脚本来启动和杀死两者的奖励积分

原文由 Loren_ 发布，翻译遵循 CC BY-SA 3.0 许可协议