Add Webpack Hot Module Replacement (HMR) to a Drupal Theme for Drupal 8, 9, and 10

Hot Module Replacement (HMR) is a technique for using Webpack to update the code that your browser renders without requiring a page refresh. With HMR configured it's possible to edit your JavaScript (and CSS) files in your IDE and have the browser update the page without requiring a refresh, allowing you to effectively see the results of your changes in near real time. If you're editing JavaScript or CSS it's amazing. And, it's one of the reasons people love the developer experience of working with React so much.

If you're writing React code as part of a Drupal theme it's possible configure HMR to work with Drupal. Doing so will allow live reloading of any JavaScript and CSS processed by Webpack.

In this tutorial we'll:

  • Walk through configuring Webpack hot module replacement for a Drupal theme
  • Add an npm run start:hmr command that will start the webpack-dev-server in HMR mode
  • Configure the webpack-dev-server to proxy requests to Drupal so we can view our normal Drupal pages

By the end of this tutorial you should know how to add Webpack's hot module replacement feature to your Drupal theme and preview changes to your React code in real time.