Let’s say you have a simple webpage:
<!-- index.html -->
<html>
<body>
<script src="bundle.js"></script>
</body>
</html>
With the script generated by webpack:
// main.js
console.log('hello world');
// webpack.config.js
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
}
};
Wouldn’t it be nice to set up automatic page refresh/reload during development?
With webpack-dev-server, this can be done.
Install
Install webpack-dev-server and webpack:
$ npm install [email protected] [email protected]
Run Server
The quickest way to start the server is to run the local binary:
$ node_modules/.bin/webpack-dev-server
# if it's installed globally, you can run `webpack-dev-server`
You should be able to view the page on http://localhost:8080/webpack-dev-server/
.
Additionally, you can create an npm script for convenience:
{
"scripts": {
"start": "webpack-dev-server"
}
}
This allows you to start the server with:
$ npm start
Update
Now if you edit main.js
and save the file:
// main.js
console.log('Hello, world!');
You should get that log in your browser console.