使用webpack-dev-server运行节点express服务器 [英] Running a node express server using webpack-dev-server
问题描述
我使用webpack使用以下配置成功运行我的反应前端：
{
name： 'client'，
条目：'./scripts/main.js'，
输出：{
路径：__dirname，
文件名：'bundle.js'
}，
module：{
loaders：[
{
test：/.jsx?$/，
loader：'babel-loader'，
排除：/ node_modules /，
查询：{
预设：['es2015'，'react'，'stage-2']
}
}
]
}
}
我试图放一个node.js express后端也是，并希望通过webpack运行，所以我有一个服务器运行后端和前端，并且因为我想要使用babel来转载我的javascript。
我做了一个看起来像thi的快速测试服务器s：
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（'示例应用程序侦听端口3000'）;
}）;
如果我用 node index.js 并在 localhost：3000 上打开我的浏览器，它打印Hello！Hello！到现在为止还挺好。然后我尝试为它创建一个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：{
装载机：[
{
测试：/\.js$/，
装载机：[
'babel-loader'
]
}，
{
test：/\.json$/，
loader：'json-loader'
}
]
}
当我运行命令 webpack-dev-server 它启动成功（似乎）。但是，如果我现在在 localhost：3000 上浏览我的浏览器，它只是说网页不可用，就像服务器根本不运行一样。 p>
我对于节点和webpack都很新，所以我在某个地方犯了一个小错误，或者我已经离开了;）
Webpack-dev-server非常适合客户端开发，但不会部署Express api或中间件。所以在开发中，我建议运行两个单独的服务器：一个用于客户端，一个用于服务器端api。
Nodemon npm install --save-dev nodemon 是一款很好的后端开发服务器，可以让您重新部署的api，或者您可以在进行更改时使用express并重新启动。在生产中，客户端和api仍然由同一个快递服务器提供。
在<$ c $中为nodemon和webpack-dev-server设置一个生命周期事件c> package.json 可以轻松启动它们（例如： npm运行dev-server ）。
脚本：{
start：webpack --progress --colors，
dev-server：nodemon ./server.js localhost 8080，
dev-client：webpack-dev-server -port 3000，
}
或者，直接从节点运行express：
脚本：{
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（）;
//导入路由
require（'./_ routes'）（app）; //< - 或者你做什么来包括你的API端点和中间件
app.set（'port'，8080）;
app.listen（app.get（'port'），function（）{
console.log（'Node App Started'）;
}）;
注意：api服务器必须使用与webpack-dev-server不同的端口。 / strong>
最后在您的webpack-dev-config中，您需要使用代理将呼叫重定向到您的api到新端口：
devServer：{
historyApiFallback：true，
hot：true，
inline： true，
host：'localhost'，//默认为`localhost`
port：3000，//默认为8080
proxy：{
'^ / api / *'：{
target：'http：// localhost：8080 / api /'，
secure：false
}
}
}，
//分开，在你的插件部分
plugins：[
new webpack.HotModuleReplacementPlugin（{
multiStep：true
}）
]
**有一个脚本启动和杀死的奖励积分
I'm using webpack to run my react frontend successfully using the following config:
{
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']
}
}
]
}
}
I'm trying to put up a node.js express backend as well, and would like to run that through webpack as well, so that I have a single server running both the backend and frontend, and because I want to use babel to transpile my javascript.
I made a quick testserver looking like this:
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');
});
If I run this with node index.js and open my browser on localhost:3000 it prints "Hello world from Express!!". So far so good. Then I tried creating a web-pack config for it:
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'
}
]
}
}
When I run the command webpack-dev-server it starts up successfully (it seems). However, if I go to my browser on localhost:3000 now, it just says that the webpage is not available, just as when the server is not running at all.
I'm very new to both node and webpack, so either I have made a small mistake somewhere, or I'm way off ;)
Webpack-dev-server is great for client side development but it will not deploy Express api's or middleware. So in development I recommend running two separate servers: One for the client and one for your server side api's.
Nodemon npm install --save-dev nodemon is a good backend development server that will give you hot-redeploy of your api's, or you can just use express and restart when you make changes. In production the client and api will still be served by the same express server.
Set a lifecycle event for both nodemon and webpack-dev-server in your package.json to make starting them easy (example: npm run dev-server).
"scripts": {
"start": "webpack --progress --colors",
"dev-server": "nodemon ./server.js localhost 8080",
"dev-client": "webpack-dev-server --port 3000",
}
Or, to run express directly from node:
"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');
});
Note: The api server must use a different port than webpack-dev-server.
And finally in your webpack-dev-config you need to use a proxy to redirect calls to your api to the new port:
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
})
]
**Bonus points for having a single script to start and kill both
这篇关于使用webpack-dev-server运行节点express服务器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
