React & Webpack配置求助：bundle.js加载失败

Hey there! Let's work through why your bundle.js isn't loading—this is such a common hiccup when you're just getting started with Webpack and React, so you're definitely not alone here. Let's break down the most likely fixes step by step:

1. Double-Check Your Webpack Output Configuration #

First, let's make sure your webpack.config.js is correctly pointing to where bundle.js should be generated. From the snippet you shared, you have DIST_VAR set to your dist folder—now confirm your output object is properly configured:

output: {
  path: DIST_VAR, // Should point directly to your dist directory
  filename: "bundle.js", // Exact name of your bundled file
  publicPath: "/" // Critical for dev server: tells Webpack where to serve the bundle from
}

Omitting publicPath often leads to Webpack looking for bundle.js in the wrong location when using the development server.

2. Verify Your index.html Script Reference #

How you link bundle.js in your index.html depends on whether you're using the dev server or building a static bundle:

• If using webpack serve (dev server): The bundle lives in memory (not your actual dist folder). Use a root-relative path:

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

• If running a production build (webpack --mode production): The bundle is saved to your dist folder, so use a relative path matching its location:

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

Pro tip: Use the html-webpack-plugin to auto-inject the correct script tag for you—this avoids manual path mistakes. Install it with npm install html-webpack-plugin --save-dev, then add it to your Webpack config:

const HtmlWebpackPlugin = require('html-webpack-plugin');

// Add this to your config.plugins array
plugins: [
  new HtmlWebpackPlugin({
    template: './index.html' // Path to your source index.html file
  })
]

3. Confirm Your Dev Server Setup #

If you're using webpack-dev-server, make sure it's configured to serve your static files correctly. Add this section to your webpack.config.js:

devServer: {
  static: {
    directory: path.join(__dirname, '/'), // Points to where your index.html lives (root folder here)
  },
  port: 3000, // Use whatever port you prefer
  open: true // Auto-opens the browser when starting the server
}

4. Check Your Build/Start Scripts #

Ensure your package.json has the right scripts to run Webpack properly:

"scripts": {
  "start": "webpack serve --mode development",
  "build": "webpack --mode production"
}

Run npm start for the dev server, or npm run build to generate a static bundle in your dist folder.

5. Don't Forget Babel (For React JSX) #

Since you're using React, you'll need Babel to transpile JSX into plain JavaScript. Install these required packages:

npm install babel-loader @babel/core @babel/preset-env @babel/preset-react --save-dev

Then add a .babelrc file in your project root:

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

Update your Webpack module rules to use Babel for processing React files:

module: {
  rules: [
    {
      test: /\.jsx?$/, // Matches both .js and .jsx files
      include: SRC_VAR, // Only process files in your src folder
      exclude: /node_modules/,
      use: 'babel-loader'
    }
  ]
}

If you're still stuck, feel free to share your full webpack.config.js and index.html code—we can dig deeper from there!

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