Using webpack-dev-server

Setup

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.

index.html:

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

    <div id="app" />

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

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>.

Found a mistake? Have a question or improvement idea? Let me know.

Installation:

*Installation

*Simple setup

*Using webpack-dev-server