React Installation Using webpack-dev-server
Example
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.publicPathwhich sets up a path to have our bundle be served from (see Webpack configuration files for more info) -
devServercontentBasethe base path to serve static files from (for exampleindex.html)hotsets 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>.
