Webpack Dev Server嵌套路由下模块更新无重渲染及MIME类型报错

Got it, let's break down your two related issues—they're actually connected, and the fix boils down to configuring Webpack Dev Server to properly handle React Router's HTML5 history mode and hot module replacement.

1. Why You're Seeing the MIME Type Error #

That Refused to execute script... MIME type ('text/html') error happens because when you navigate to a nested route like localhost/docs/nestedRoute and trigger a reload (or hot reload), Webpack Dev Server tries to fetch a file at that exact path (e.g., /Docs/bundle.c2e76650.js relative to /docs/nestedRoute), can't find it, and returns your index.html instead. Since the server sends index.html with a text/html MIME type, the browser refuses to run it as JavaScript.

2. Why Nested Route Hot Reload Fails #

Without proper routing fallback, Webpack Dev Server can't map nested routes back to your app's entry point, so it can't trigger the hot reload logic correctly when modules update.

Step-by-Step Fixes #

Update Your Webpack Dev Server Config #

Modify your webpack.config.js devServer block to add critical settings for routing and hot reload:

const webpack = require('webpack');

module.exports = {
  // ... rest of your config
  devServer: {
    contentBase: "dist",
    overlay: true,
    hot: true, // Enable hot module replacement
    historyApiFallback: true, // Serve index.html for all routes (fixes nested routing)
    publicPath: '/' // Ensure assets are loaded from the root path
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(), // Required for hot reload
    // ... other plugins you might have
  ]
};

Add React-Specific Hot Reload Setup (If Needed) #

If you're using React 16+, you'll want to add the react-refresh Babel plugin to make hot reload work seamlessly without losing component state:

1. Install the plugin:

npm install --save-dev react-refresh @pmmmwh/react-refresh-webpack-plugin

2. Update your Babel config (.babelrc or babel.config.js):

{
  "presets": ["@babel/preset-react"],
  "plugins": ["react-refresh/babel"]
}

3. Add the Webpack plugin to your webpack.config.js:

const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

module.exports = {
  // ... rest of config
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new ReactRefreshWebpackPlugin(), // Add this line
  ]
};

Verify Your Entry File #

Make sure your main entry file (e.g., index.js) has hot reload acceptance logic:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

// Accept hot reload updates
if (module.hot) {
  module.hot.accept();
}

Why This Works #

• historyApiFallback: true tells Webpack Dev Server to serve your index.html for any route that doesn't match a static file. This lets React Router take over client-side routing, so nested routes don't trigger 404s (and thus don't return HTML as JS).
• hot: true + HotModuleReplacementPlugin enables Webpack to replace updated modules without a full page reload.
• publicPath: '/' ensures all assets are loaded from the root of your server, not relative to the current nested route.

内容的提问来源于stack exchange，提问作者canaan seaton