webpack-dev-server监听问题：home.html不触发重载，watchContentBase失效

Great questions—let's unpack them step by step, since they tie directly to how webpack-dev-server handles file watching and content serving:

1. Why isn't watchContentBase monitoring all files under your content base? #

The watchContentBase feature only monitors the specific directories you define in the devServer.contentBase option, and it’s disabled by default. From your project structure and behavior, it’s almost certain your config only sets /app as the content base—so it has no reason to watch files in /core.

Other possible culprits to check:

• You forgot to set watchContentBase: true in your devServer config (it defaults to false).
• Your watchOptions.ignored setting is excluding the /core directory or home.html specifically.

2. Why does modifying home.html not trigger a reload, but home.js or index.html do? #

Let’s break down each file’s behavior:

• index.html: Lives in /app, which is likely your configured content base. When watchContentBase is enabled, it detects changes here and triggers a reload automatically.
• home.js: Is imported into app.js (your entry point), so it’s part of webpack’s core dependency graph. Webpack’s built-in watcher tracks all files in this graph—when home.js changes, webpack recompiles the bundle, and the dev server picks up this change to reload the page.
• home.html: Resides in /core, which isn’t included in your content base. Since watchContentBase isn’t monitoring this directory, changes to home.html fly under the radar and don’t trigger a reload.

Fixing the Issues #

Update your webpack.config.js to include both directories in contentBase and enable watchContentBase:

const path = require('path');
module.exports = {
  entry: './app/app.js',
  output: {
    path: path.resolve(__dirname, './app/dist'),
    filename: 'app.bundle.js'
  },
  // Add/Update devServer config
  devServer: {
    contentBase: [
      path.resolve(__dirname, './app'),
      path.resolve(__dirname, './core')
    ],
    watchContentBase: true, // Critical to enable content base watching
    open: true // Optional: Opens the browser automatically
  },
  // Ensure watchOptions aren't ignoring your files
  watchOptions: {
    ignored: /node_modules/ // Only ignore node_modules, not your app/core files
  }
};

After making this change, webpack-dev-server will monitor both /app and /core directories. Modifying home.html should now trigger a browser reload just like the other files.

内容的提问来源于stack exchange，提问作者m aksem