使用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。 我面对完全相同的问题,这是我如何解决它 –
-
有多个入口点为您的应用程序
特别是你可以把所有的供应商文件,如JQuery,React等放到一个块中。 这样,即使您修改了源文件,供应商文件也将保持不变。 你可以添加这行到你的webpackconfiguration
entry: { vendors: ['react','reactDom','jquery'] //Any other libraries }
使用CommonsChunkPlugin
让webpack确定你使用的代码/模块最多,并把它放在一个单独的包中,以便在应用程序的任何地方使用。
plugins: [ new webpack.optimize.CommonsChunkPlugin('vendors', 'dist/js/vendors.js', Infinity), ]
-
使用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
-
修改您的
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>
-
运行
webpack-dev-server --hot --inline
,
等待捆绑完成,然后在浏览器中打开http:// localhost:3000 (您的快速服务器端口)。
如果遇到任何错误,您可以find这个故障排除指南非常有用。
希望这有帮助,你可以看看我的项目在这里的webpack设置