继承无文档Django+React项目，webpack-dev-server热重载问题求助

Hey there, let's work through this webpack-dev-server hot reload issue step by step—this is a common pain point with Django + React projects deployed under a subpath, so we'll get you sorted.

First, Let's Fix the Directory List Problem #

The reason you're seeing a directory list instead of your React app is that webpack-dev-server can't find your entry HTML file (usually index.html) and doesn't know which file to serve by default. Here's how to fix that:

1. Confirm your output & entry setup
   First, check your webpack.config.js to find where your compiled React assets are output. Look for the output section—it should look something like this:

   const path = require('path');
   
   module.exports = {
     // ... other config
     output: {
       path: path.resolve(__dirname, 'dist'), // Your compiled assets folder
       filename: 'bundle.js',
       publicPath: '/myapp/' // Critical: matches your Apache subpath
     },
   };
   

   The publicPath is key here—it needs to exactly match the /myapp/ path from your Apache deployment.

2. Configure webpack-dev-server correctly
   Depending on your webpack version, add a devServer block to your config:

   • For webpack 4 and below:

     devServer: {
       contentBase: path.resolve(__dirname, 'dist'), // Point to your compiled assets folder
       publicPath: '/myapp/', // Match output.publicPath
       hot: true, // Enable hot reload
       historyApiFallback: true, // Fixes routing if you use React Router
       headers: {
         'Access-Control-Allow-Origin': '*', // Lets Django load assets from dev-server
       }
     }
     

   • For webpack 5: contentBase was replaced with static, so use this instead:

     devServer: {
       static: {
         directory: path.resolve(__dirname, 'dist'),
         publicPath: '/myapp/'
       },
       hot: true,
       historyApiFallback: true,
       headers: {
         'Access-Control-Allow-Origin': '*',
       }
     }
     

3. Ensure you have an entry HTML file
   If you don't already have one, use the html-webpack-plugin to auto-generate your index.html (this avoids manual updates to script paths). Install it first:

   npm install html-webpack-plugin --save-dev
   

   Then add it to your webpack plugins:

   const HtmlWebpackPlugin = require('html-webpack-plugin');
   
   module.exports = {
     // ... other config
     plugins: [
       new HtmlWebpackPlugin({
         template: './src/index.html', // Path to your raw HTML template
         filename: 'index.html'
       })
     ]
   };
   

   This will ensure webpack-dev-server loads index.html by default instead of showing a directory list.

Set Up Hot Reload with Django #

Since your app is tied to Django, you need to make sure Django loads the hot-reloaded assets from webpack-dev-server instead of the static files:

1. Update your Django template
   In the template where you load your React bundle, add a conditional to switch between dev and production assets:

   {% if DEBUG %}
     <!-- Load from webpack-dev-server during development -->
     <script src="http://localhost:8080/myapp/bundle.js"></script>
   {% else %}
     <!-- Load compiled static files in production -->
     <script src="/myapp/bundle.js"></script>
   {% endif %}
   

2. Add a dev script to package.json
   Make it easy to start the dev server by adding this to your package.json:

   "scripts": {
     "dev": "webpack-dev-server --config webpack.config.js --hot"
   }
   

Test It Out #

1. Start the webpack dev server:

   npm run dev
   

   You should see output confirming it's running at http://localhost:8080/myapp/—visit this URL directly to make sure your React app loads (no directory list!).
2. Start your Django development server (or keep Apache running if you prefer) and visit https://localhost/myapp/.
3. Make a change to appbar.js—your browser should auto-refresh with the updates!

Quick Troubleshooting #

• If you still see a directory list: Double-check that your dist folder has an index.html file, and that contentBase/static.directory points directly to that folder.
• If hot reload doesn't trigger: Ensure hot: true is set in devServer, and that you're using the --hot flag in your dev script.
• If Django can't load the dev server assets: Verify the Access-Control-Allow-Origin header is set in devServer, and that the script URL in your template matches the dev server's address + public path.

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