Hot Reloading

Now I will add on webpack-hot-middleware so when I save files I can see the updates without restarting or refreshing the server.

• Add webpack-hot-middleware to the project
  • yarn add webpack-hot-middleware
• Add webpack and webpack-hot-middleware script to webpack.config.js

webpack.config.js

const path = require('path')
const webpack = require('webpack')
const hotModuleScript = 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000'

• Add plugins object to webpack.config.js

  module:{
  /* Rules Here */
  },
  plugins: [
   new webpack.HotModuleReplacementPlugin(),
   new webpack.NoEmitOnErrorsPlugin()
  ]
  

• Last thing I will do to the webpack.config.js file for now is add the hotModuleScript to the entry. Also I will set it up now as an object so adding another entry later is more simple.

webpack.config.js

 ```javascript

entry: {// Now an object bundle: [hotModuleScript, './src/index.js'] },// Each entry will need a hotModuleScript output: { filename: '[name].js',// <- updated path: path.resolve(__dirname, 'dist'), publicPath: '/' }

 ```

• Back to server.js I need to let express know about the middleware.

server.js

//...
const webpackHotMiddleware = require('webpack-hot-middleware')
//...
app.use(
   [webpackDevMiddleware(compiler, {
         publicPath: config.output.publicPath
   })],
   [webpackHotMiddleware(compiler, {
         // Options
   })]
)
       // app.get('/'...

That should do it, if run npm start again and go to http: //localhost:3000 again you will see the same thing but now open the editor to the side and edit the style.css or index.js file and after the file is saved the page will update.

For more information about webpack-hot-middleware go here.

Full Files

webpack.config.js

const path = require('path')
const webpack = require('webpack')
const hotModuleScript = 'webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000'

module.exports = {
 mode: 'development', /* Let webpack know we are in development */
 entry: {
   bundle: [hotModuleScript, './src/index.js']
 },
 output: {
   filename: '[name].js',
   path: path.resolve(__dirname, 'dist'),
   publicPath: '/'
 },
 module: {
   rules: [
     {
       test: /\.css$/,
       use: [
         {loader: 'style-loader'},
         {loader: 'css-loader'}
       ]
     }
   ]
 },
 plugins: [
   new webpack.HotModuleReplacementPlugin(),
   new webpack.NoEmitOnErrorsPlugin()
 ]
}

server.js

const webpack = require('webpack')
const webpackDevMiddleware = require('webpack-dev-middleware')
const config = require('./webpack.config')
const compiler = webpack(config)
const webpackHotMiddleware = require('webpack-hot-middleware')

const path = require('path')
const express = require('express')
const app = express()

app.use(
  [webpackDevMiddleware(compiler, {
    publicPath: config.output.publicPath
  })],
  [webpackHotMiddleware(compiler, {
    // Options
  })]
)

app.get('/', (req, res) => {
  res.sendFile(path.resolve(__dirname, 'dist/index.html'))
})

app.listen(3000, () => {
  console.log('Server running @ http://localhost:3000');
})

index.js

import './style.css'

var title = document.createElement('h1')

title.className = 'title'

title.innerText = "Hello Webpack!"

document.body.appendChild(title)

style.css

.title {
  font-size: 40px;
  color: #444;
  font-family: sans-serif;
}