如何配置Webpack热重载以保留localStorage数据？

Hey there! Great question—this is a super common gotcha when working with Vue CLI and hot reloading, but luckily there are straightforward fixes. Let’s break down why this happens and how to stop it:

Why is localStorage getting wiped? #

First off, Webpack’s Hot Module Replacement (HMR) doesn’t clear localStorage by default. The issue almost always comes from one of these places:

• Your app’s initialization code is accidentally resetting localStorage on every reload (even HMR)
• You’re triggering full page refreshes instead of true hot swaps (which can run code that clears storage)
• A rogue plugin or custom config is interfering with browser storage

Fix 1: Check your entry file for accidental clears #

Start with the simplest fix—look at your main.js (or app entry file) for code that might be wiping localStorage in development. It’s easy to add something like this during testing and forget about it:

// main.js
if (process.env.NODE_ENV === 'development') {
  localStorage.clear(); // This will run EVERY time the app loads, including HMR
}

If you find this line, delete or comment it out. This is by far the most common cause of this issue.

Fix 2: Ensure HMR is working properly (no full page reloads) #

Vue CLI uses webpack-dev-server under the hood. If HMR is falling back to full page refreshes (instead of swapping modules in place), your app might run initialization code that clears localStorage.

To fix this, add or update your vue.config.js with these settings:

module.exports = {
  devServer: {
    hot: true, // Force enable HMR
    liveReload: false, // Disable live reload to prioritize HMR
    client: {
      overlay: false, // Optional: reduces overlay interruptions during HMR
    }
  }
}

Most of the time, Vue CLI has HMR enabled by default, but double-checking these settings ensures you’re getting true hot swaps instead of full refreshes.

Fix 3: Use Webpack’s HMR API to preserve state #

If your components rely on localStorage for state, you can use Webpack’s HMR API to explicitly save and restore data during hot updates. This is especially useful for complex components:

export default {
  data() {
    return {
      userPreferences: JSON.parse(localStorage.getItem('userPrefs')) || {}
    }
  },
  mounted() {
    if (module.hot) {
      // Accept the hot update
      module.hot.accept();
      // Save state to localStorage before the module reloads
      module.hot.dispose(() => {
        localStorage.setItem('userPrefs', JSON.stringify(this.userPreferences));
      });
    }
  }
}

This way, even if a component reloads via HMR, your localStorage data stays intact because you’re explicitly saving it before the update.

Fix 4: Rule out plugin interference #

If you’re using any custom Webpack plugins (like clean-webpack-plugin), double-check their configurations. While most build plugins target your project’s output directory, it’s possible that a dev plugin could be accidentally clearing browser storage. Disable any non-essential dev plugins temporarily to see if that fixes the issue.

Content from Stack Exchange, asked by lukaszkups