React Using webpack-dev-server



After setting up a simple project to use webpack, babel and react issuing $npm i -g webpack-dev-server will install the development http server for quicker development.

Modifying webpack.config.js

var path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'out'),
    publicPath: '/public/',
    filename: 'bundle.js'
  module: {
    loaders: [
        test: /\.js$/,
        exclude: /(node_modules)/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'react']
  devServer: {
    contentBase: path.resolve(__dirname, 'public'),
    hot: true

The modifications are in

  • output.publicPath which sets up a path to have our bundle be served from (see Webpack configuration files for more info)

  • devServer

    • contentBase the base path to serve static files from (for example index.html)
    • hot sets the webpack-dev-server to hot reload when changes get made to files on disk

And finally we just need a simple index.html to test our app in.


<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <title>React Sandbox</title>

    <div id="app" />

    <script src="public/bundle.js"></script>

With this setup running $webpack-dev-server should start a local http server on port 8080 and upon connecting should render a page containing a <h1>Hello world!</h1>.