React+Webpack执行npm start后浏览器空白页问题求助

Hey there, let's figure out why your React app is showing a blank page when you run npm start and visit http://localhost:8080/. I've gone through your webpack config and directory structure, and here are the key issues to fix:

1. Duplicate output Configurations in webpack.config.js #

You've defined two output objects in your config—webpack will only use the last one, which means your publicPath setting (critical for asset resolution) gets completely ignored. This breaks how your app loads the bundled JavaScript.

Fix: Merge the output settings #

Combine the two output blocks into one, keeping the necessary properties like publicPath:

output: {
  path: __dirname + "/public/",
  publicPath: '/',
  filename: "bundle.js",
  chunkFilename: '[name].js'
}

2. Incorrect Loader Order for ESLint #

Your ESLint loader is placed after babel-loader in the .js rule. Since loaders run from right to left, this means you're linting already-transpiled code instead of your original source. Swap the order so ESLint runs first:

{
  test: /\.js$/,
  exclude: /node_modules/,
  use: ['eslint-loader', 'babel-loader'] // ESLint first, then Babel
}

3. Deprecated loaders Syntax for CSS #

Webpack 4+ uses use instead of loaders for loader configurations. Also, your include path had an unnecessary leading slash—fix that to ensure CSS in your src folder is processed correctly:

{
  test: /\.css$/,
  include: path.resolve(__dirname, 'src'), // No leading slash here
  use: ["style-loader", "css-loader"]
}

Note: Don't forget to import path at the top of your webpack config with const path = require('path');—your current config is missing this!

4. Check Your index.html and Root Component Setup #

Even with a fixed webpack config, you'll get a blank page if:

• Your public/index.html doesn't have a mount point for React. Add this inside the <body> tag:

  <div id="root"></div>
  

• Your index.html doesn't include the bundled bundle.js. Add this script tag right before the closing </body> tag:

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

• Your src/index.js isn't rendering your root component. Make sure it has code like this (adjust for React 18+):

  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import App from './components/App'; // Replace with your actual root component
  
  const rootElement = document.getElementById('root');
  const root = ReactDOM.createRoot(rootElement);
  root.render(<App />);
  

Full Fixed webpack.config.js #

Here's the complete corrected config putting all these fixes together:

const path = require('path'); // Don't forget this import!

module.exports = { 
  entry: [ './src/index.js' ], 
  module: { 
    rules: [ 
      { 
        test: /\.(js|jsx)$/, 
        exclude: /node_modules/, 
        use: ['babel-loader'], 
      },
      { 
        test: /\.js$/, 
        exclude: /node_modules/, 
        use: ['eslint-loader', 'babel-loader'] 
      },
      { 
        test: /\.css$/, 
        include: path.resolve(__dirname, 'src'), 
        use: ["style-loader","css-loader"] 
      },
      { 
        test: /\.(eot|svg|ttf|woff|woff2)$/, 
        use: [{ 
          loader: 'file-loader', 
          options: { 
            name: '[name].[ext]', 
            outputPath: 'fonts/' 
          } 
        }] 
      },
      { 
        test: /\.(png|jpg|gif)$/, 
        use: ['file-loader'] 
      } 
    ] 
  }, 
  resolve: { 
    extensions: ['*', '.js', '.jsx'] 
  }, 
  output: { 
    path: __dirname + "/public/", 
    publicPath: '/',
    filename: "bundle.js", 
    chunkFilename: '[name].js' 
  }, 
  devServer: { 
    contentBase: __dirname + "/public/", 
    port: 8080 
  } 
};

After making these changes, stop your dev server, run npm start again, and your app should load correctly!

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