使用webpack-dev-server运行节点快速服务器

我正在使用webpack使用以下configuration成功运行我的反应前端:

{ 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'] } } ] } } 

我想搭build一个node.jsexpression式的后端,也希望通过webpack运行它,这样我有一台服务器运行后端和前端,因为我想用babel来传输我的JavaScript。

我做了一个快速的testing服务器,如下所示:

 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它打印“从快递世界!”。 到现在为止还挺好。 然后,我尝试为它创build一个networking包configuration:

 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上访问我的浏览器,就说明网页不可用,就像服务器根本没有运行一样。

我对节点和webpack都很陌生,所以我在某个地方犯了一个小错误,或者我离开了;)

Webpack-dev-server非常适合客户端开发,但不会部署Express api或中间件。 所以在开发中,我build议运行两个独立的服务器:一个用于客户端,另一个用于服务器端API。

Nodemon npm install --save-dev nodemon是一个很好的后端开发服务器,可以让你重新部署你的api,或者你可以直接使用express并且在你进行修改时重新启动。 在生产中,客户端和API仍然由同一个快递服务器提供服务。

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中,您需要使用代理将呼叫redirect到您的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 }) ] 

**有一个单一的脚本启动和杀死两个加分

从你这里和这里的问题看来,你正在使用ES6的ReactJS。 我面对完全相同的问题,这是我如何解决它 –

  1. 有多个入口点为您的应用程序

特别是你可以把所有的供应商文件,如JQuery,React等放到一个块中。 这样,即使您修改了源文件,供应商文件也将保持不变。 你可以添加这行到你的webpackconfiguration

 entry: { vendors: ['react','reactDom','jquery'] //Any other libraries } 

使用CommonsChunkPlugin让webpack确定你使用的代码/模块最多,并把它放在一个单独的包中,以便在应用程序的任何地方使用。

 plugins: [ new webpack.optimize.CommonsChunkPlugin('vendors', 'dist/js/vendors.js', Infinity), ] 
  1. 使用React Hot Loader

运行npm install react-hot-loader --save-dev 。 确保你先安装了webpack-dev-server

那么你需要改变你的装载机到这个 –

 loaders: [ { test: /\.jsx?$/, loaders: ['react-hot'], include: path.join(__dirname, 'public') },{ loader: 'babel', query: { presets: ['react', 'es2015'] }, include: path.join(__dirname, 'public') }, ] 

确保React Hot Loader在加载器数组中的Babel之前。 还要确保你有include: path.join(__dirname, 'public')来避免处理node_modules,否则你可能会得到这样的错误 –

Uncaught TypeError: Cannot read property 'NODE_ENV' of undefined

  1. 修改您的index.html页面中的脚本标记

如果你的html有这样的东西 –

 <script src="/dist/js/vendors.js"></script> <script src="/dist/js/app.bundle.js"></script> 

将其更改为指向您的webpack-dev-server代理 –

 <script src="http://localhost:8080/dist/js/vendors.js"></script> <script src="http://localhost:8080/dist/js/app.bundle.js"></script> 
  1. 运行webpack-dev-server --hot --inline

等待捆绑完成,然后在浏览器中打开http:// localhost:3000 (您的快速服务器端口)。

如果遇到任何错误,您可以find这个故障排除指南非常有用。

希望这有帮助,你可以看看我的项目在这里的webpack设置