React项目开发模式下src目录文件无法加载问题排查

Hey there! Let's break down exactly what's going wrong with your setup and fix it step by step:

1. Webpack Output Path Is Misconfigured #

Your output.path is set to '/'—that's an absolute system root path, meaning webpack is trying to dump your bundle.js directly into your computer's root folder instead of your project's public directory. No wonder your index.html can't find the React code!

Fix: Update the output section to target your project's public folder:

output: {
    path: path.resolve(__dirname, 'public'), // Outputs bundle.js to your public folder
    filename: 'bundle.js'
},

2. Custom Server vs. Webpack Dev Server Conflict #

Your package.json runs a custom Node server (server/main.js) on port 4000, but your webpack config includes webpack-dev-server settings (like proxying to port 3000). These two servers are competing, and your custom server isn't set up to serve the webpack-bundled React files.

To use your custom server with hot reloading, we need to integrate webpack's dev middleware directly into it instead of relying on webpack-dev-server:

Step 1: Install Required Middleware #

First, add these packages to your project:

npm install webpack-dev-middleware webpack-hot-middleware --save-dev

Step 2: Update Your Server File (server/main.js) #

Modify your server to use the webpack middleware:

const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const webpackHotMiddleware = require('webpack-hot-middleware');
const config = require('../webpack.dev.config.js');

const app = express();
const compiler = webpack(config);

// Serve the webpack bundle with dev middleware
app.use(webpackDevMiddleware(compiler, {
  publicPath: config.output.publicPath,
  hot: true,
  stats: { colors: true } // Makes terminal output easier to read
}));

// Add hot reloading support
app.use(webpackHotMiddleware(compiler));

// Serve static files from your public folder
app.use(express.static('public'));

app.listen(4000, () => {
  console.log('Server running on http://localhost:4000 🚀');
});

Step 3: Clean Up Your Webpack Config #

Remove the conflicting webpack-dev-server settings and update your entry points:

• Delete the entire devServer section from your webpack config
• Replace the webpack-dev-server entry lines with the hot middleware client:

entry: [
    'babel-polyfill',
    'webpack-hot-middleware/client', // Handles hot reloading through our custom server
    './src/index.js',
    './src/style.css'
],

3. Verify index.html Loads bundle.js #

Double-check that your public/index.html includes a script tag pointing to your bundle:

<script src="/bundle.js"></script>

4. Double-Check Babel Presets (Optional) #

Make sure you have the required Babel presets installed:

npm install babel-preset-es2015 babel-preset-react --save-dev

Once you've made these changes, stop your running server, run npm run development again, and visit http://localhost:4000—your React app from src/index.js should load properly now!

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