Using HMR with CSS is a little more straightforward with the help of style-loader. This loader uses module.hot.accept to patch style tags when CSS dependencies are updated.

In the next stage of our practical example, we will be taking the following steps:

1. Start by installing both loaders with the following command:

npm install --save-dev style-loader css-loader

2. Next, update the configuration file, webpack.config.js, to make use of the loaders:

  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const CleanWebpackPlugin = require('clean-webpack-plugin');
  const webpack = require('webpack');

  module.exports = {
    entry: {
      app: './src/index.js'
    },
    devtool: 'inline-source-map',
    devServer: {
      contentBase: './dist',
      hot: true
    },
    module: {
      rules: [
        {
          test: /.css$/,
          use: ['style-loader', 'css-loader']
        }
      ]
    },
    plugins: [
      // new CleanWebpackPlugin(['dist/*']) for < v2 versions of 
        // CleanWebpackPlugin
      new CleanWebpackPlugin(),
      new HtmlWebpackPlugin({
        title: 'Hot Module Replacement'
      }),
      new webpack.HotModuleReplacementPlugin()
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

Hot loading style sheets is as easy as importing them into the module, as you can see from the text in bold in the previous configuration example and the directory structure example to follow.

3. Ensure that you organize the project files and directories, as shown, in the following structure:

  webpack5-demo
  | - package.json
  | - webpack.config.js
  | - /dist
    | - bundle.js
  | - /src
    | - index.js
    | - print.js
    | - styles.css

4. Append the style sheet by adding a body style to style the background of the document body associated with it blue. Do this using the styles.css file:

body {
  background: blue;
}

5. After that, we need to ensure the content is loaded to the index.js file correctly, as follows:

  import _ from 'lodash';
  import printMe from './print.js';
  import './styles.css';

  function component() {
    const element = document.createElement('div');
    const btn = document.createElement('button');

    element.innerHTML = _.join(['Hello', 'Webpack'], ' ');

    btn.innerHTML = 'Click me and check the console!';
    btn.onclick = printMe;  // onclick event is bind to the 
                            // original printMe function

    element.appendChild(btn);

    return element;
  }

  let element = component();
  document.body.appendChild(element);

  if (module.hot) {
    module.hot.accept('./print.js', function() {
      console.log('Accepting the updated printMe module!');
      document.body.removeChild(element);
      element = component(); // Re-render the "component" to update 
                             // the click handler
      document.body.appendChild(element);
    })
  }

Now, when the style of the body tag background class is changed to red, the color change should be immediately noted without a page refresh, indicating the live nature of hot coding.

6. You should now make these changes to the background using styles.css:

  body {
    background: blue;
    background: red;
  }

This demonstrates, in a very simple way, how live code edits can be made. This was only a simple example, but it serves as a good introduction. Now, let's progress to something trickier—loaders and frameworks.