After using webpack for a few days, the attraction of changing to using the dev server are obvious.
The webpack-dev-server is a little node.js Express server, which uses the webpack-dev-middleware to serve a webpack bundle.
Install
Oddly enough, it needs installed via npm! However, as we’re going to run it from the command line, we’ll install it globally.
sudo npm install -g webpack-dev-server
Running
After install, simply running the server (in the same directory as the webpack.config.js file) will show it’s working and the bundle is built and made available. Next step is to get it serving the HTML file we’ve been using. This proves to be as simple as
$ webpack-dev-server --content-base html/
Requesting the page from http://127.0.0.1:8080/ gives the expected response. Removing the bundled files produced by webpack directly from the html directory and refreshing the page proves the files are being loaded from the dev server. Nice.
Hot Loading
Of course, having the bundle served by webpack is only the start – next I want any changes I make to my React code to be reflected straight away – hot loading! This is possible, but requires another module to be loaded.
npm install --save-dev react-hot-loader
The next steps are to tell webpack where things should be served, which means adding a couple of lines to our entry in webpack.config.js.
entry: [ 'webpack-dev-server/client?http://127.0.0.1:8080', 'webpack/hot/only-dev-server', path.resolve(__dirname, 'components/App.js'), ],
As I’m planning on running this from the command line I’m not going to add a plugin line as some sites advise, but rather use the ‘–hot’ command line switch. I may change in future, but at present this seems like a better plan.
The final step needed is to add the ‘react-hot’ loader, but this is where things hit a big snag. The existing entry for js(x) files looked like this.
{ test: /components/.+.jsx?$/, exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['react', 'es2015'] } },
Adding the loader seemed simple (remembering to change loader to loaders as there was more than one!).
{ test: /components/.+.jsx?$/, exclude: /node_modules/, loaders: ['react-hot', 'babel-loader'], query: { presets: ['react', 'es2015'] } },
Error: Cannot define 'query' and multiple loaders in loaders list
Whoops. The solution was given by reading various posts and eventually I settled on this. It works for my current versions of babel but may not work for future ones. All changes below are applied to the webpack.config.js file.
Add the presets as a variable before the module.exports line.
var babelPresets = {presets: ['react', 'es2015']};
Change the loader definition to use the new variable and remove the existing definition.
{ test: /components/.+.jsx?$/, exclude: /node_modules/, loaders: ['react-hot', 'babel-loader?'+JSON.stringify(babelPresets)], },
Now, when running
Editing one of the components shows the expected rebuild of the bundle when saved – exactly as expected.
All Change!
As I tried to get this working I discovered that the react-hot-plugin is being deprecated. Until it happens I’m happy with what I have, but the author promises to have a migration guide.
Running
To try and keep things simpler and avoid the inevitable memory lapses leading to scratching of head about lack of hot reloading, I’ve added a line to the package.json file. With this added I can now simply type npm run dev and the expected things will happen.
"scripts": { "test": "echo "Error: no test specified" && exit 1", "build": "webpack --progress", "dev": "webpack-dev-server --content-base html/ --hot" },