I have an existing express server that serves up the static assets/api data calls. How does one typically integrate webpack into this sort of setup? Does one have to run the webpack dev server to have hot module replacement? Is there any way to have webpack bundle all the modules and then just do hot module replacement by requesting static assets from an already existing server?
Thanks in advance.
Hot Module Replacement (HMR) exchanges, adds, or removes modules while an application is running, without a full reload. This can significantly speed up development in a few ways: Retain application state which is lost during a full reload. Save valuable development time by only updating what's changed.
When a hot update failed to replace the code in the browser, the HMR runtime will let webpack-dev-server know. The webpack-dev-server will then refresh the browser to download a new bundle. js file. This behavior can be disabled by adding hotOnly: true to your Webpack configuration.
You can use the CLI to modify the webpack-dev-server configuration with the following command: webpack serve --hot-only . Now let's update the index. js file so that when a change inside print. js is detected we tell webpack to accept the updated module.
You can put hotreload=false anywhere in the query string, even #hotreload=false works. You will still get: [WDS] App updated. Recompiling...
Here is my minimal express setup that does HMR
server.js
var express = require('express') var app = express() var morgan = require('morgan') var env = app.get('env') if (env == 'development') { var webpack = require('webpack') var webpackDevMiddleware = require('webpack-dev-middleware') var webpackHotMiddleware = require('webpack-hot-middleware') var config = require('./webpack.config') var compiler = webpack(config) app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath })) app.use(webpackHotMiddleware(compiler)) app.use(morgan('dev')) app.get("/", function(req, res) { res.sendFile(__dirname + '/index.html') }) } app.listen(8080, function(error) { if (error) { console.error(error) } else { console.info("==> 🌎 Listening on port %s. Open up http://localhost:%s/ in your browser.", 8080, 8080) } })
and webpack.config.js (I removed some clutter, to leave it pretty minimal)
var path = require('path'); var webpack = require('webpack'); module.exports = { entry: [ 'webpack-hot-middleware/client', './index', ], output: { path: __dirname, filename: 'bundle.js', publicPath: '/static/' }, plugins: [ new webpack.optimize.OccurenceOrderPlugin(), new webpack.HotModuleReplacementPlugin(), new webpack.NoErrorsPlugin() ], module: { loaders: [ {test: /.jsx?$/, loader: 'babel-loader', exclude: /node_modules/, query: {presets: ['es2015', 'react']} }, ] }, };
I think this should give you enough information to incorporate webpack into your express server.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With