大佬教程收集整理的这篇文章主要介绍了node.js – 使用webpack-dev-server运行节点express服务器，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
{ 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.js节点，并打开我的浏览器在本地主机：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',filename: 'bundle.js' },externals: nodeModules,module: { loaders: [ { test: /\.js$/,loaders: [ 'babel-loader' ] },{ test: /\.json$/,loader: 'json-loader' } ] } }
当我运行命令webpack-dev-server它启动成功(似乎)。然而，如果我现在在localhost：3000上浏览我的浏览器，那就只是说网页不可用，就像服务器根本没有运行一样。
nodemon npm安装–save-dev nodemon是一个很好的后端开发服务器，可以让您重新部署您的api，或者您可以在进行更改时使用express并重新启动。在生产中，客户端和api仍然由同一个快递服务器提供服务。
为您的package.json中的nodemon和webpack-dev-server设置一个生命周期事件，以便轻松启动它们(例如：npm运行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-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 }) ]
以上是大佬教程为你收集整理的node.js – 使用webpack-dev-server运行节点express服务器全部内容，希望文章能够帮你解决node.js – 使用webpack-dev-server运行节点express服务器所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。