Hey there, let's walk through resolving the two errors you're facing with Hot Module Replacement (HMR) in Webpack 4. I'll break down what's causing each problem and give you step-by-step fixes.

First Error: Duplicate Entry Point When Using --hot #

The error message mentions that configuration.entry should not contain the item 'webpack/hot/dev-server' twice—here's why that's happening:
When you add the --hot flag to your npm run dev command, Webpack Dev Server automatically injects the webpack/hot/dev-server entry point into your configuration. But you've also manually added this same entry in your webpack.config.js, creating a duplicate that violates Webpack's schema rules.

Fix for This: #

Update your entry array in webpack.config.js to remove the duplicate webpack/hot/dev-server line. Your entry should look like this:

entry: [
  'webpack-dev-server/client?http://localhost:8080',
  path.resolve(__dirname, './app/main.js')
]

Second Error: HMR Disabled When Removing --hot #

When you remove the --hot flag, you're no longer enabling HMR, but your entry still includes webpack/hot/dev-server—which expects HMR to be active. That's why you get the [HMR] Hot Module Replacement is disabled error.

Fix for This: #

You don't need to remove the --hot flag—instead, keep it in your dev script (since that's what enables HMR) and just fix the duplicate entry issue mentioned above.

Additional Webpack 4 Compatibility Fix #

Your current loader syntax (like style!css or url?limit=25000) is deprecated in Webpack 4. You'll need to update these to use the new use array syntax, which is required for Webpack 4 and later.

Update your module.rules in webpack.config.js to this:

module: {
  rules: [
    {
      test: /\.jsx?$/,
      exclude: /node_modules/,
      loader: 'babel-loader',
      query: {
        presets: ['react']
      }
    },
    {
      test: /\.css$/,
      exclude: /node_modules/,
      use: ['style-loader', 'css-loader']
    },
    {
      test: /\.less$/,
      exclude: /node_modules/,
      use: ['style-loader', 'css-loader', 'less-loader']
    },
    {
      test: /\.(png|jpg)$/,
      exclude: /node_modules/,
      use: [
        {
          loader: 'url-loader',
          options: {
            limit: 25000
          }
        }
      ]
    }
  ]
}

Final Steps to Verify #

1. Save all your configuration changes.
2. Run npm run dev again—you shouldn't see the schema error anymore, and HMR should be active without the disabled error in the browser.

If you run into any other issues, double-check that your dependency versions are compatible (your current versions of Webpack, Webpack Dev Server, and loaders should work together fine).

内容的提问来源于stack exchange，提问作者yy xia