生产构建（Webpack）时公共资源返回404问题求助

Hey there, let's dig into why your PIXI assets are throwing 404 errors in production while working perfectly locally. I've reviewed your setup, and here's what's going on and how to fix it.

What's Causing the 404s? #

• Local vs Production Path Mismatch: In development, your devServer includes the public directory in its contentBase, so requests like /images/animals/dog.png directly hit the file in public/images. But in production, even though CopyWebpackPlugin copies these assets to build/images, if your server isn't serving the build folder as its root directory, or your publicPath is misconfigured, the browser will look for assets at the wrong URL.
• Hardcoded Paths: Using fixed paths like 'images/animals/dog.png' in your PIXI Loader makes your code inflexible—if you deploy to a subdirectory (e.g., yourdomain.com/my-app/), the browser will still try to fetch from yourdomain.com/images/... instead of yourdomain.com/my-app/images/....

Solution 1: Fix the Public Path (Quick Fix) #

Adjust the publicPath in your Webpack config to match your deployment environment:

• Root directory deployment: Keep publicPath: '/' but ensure your server points to the build folder as its root.
• Subdirectory deployment (e.g., /my-app/): Update the publicPath dynamically based on environment:

  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'build'),
    publicPath: isProd ? '/my-app/' : '/', // Replace with your actual subdirectory
  },
  

• Flexible deployment (any path): Use ./ as the public path so all assets load relative to index.html:

  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'build'),
    publicPath: isProd ? './' : '/',
  },
  

Solution 2: Let Webpack Manage Your Assets (Recommended) #

Hardcoding paths isn't ideal—let Webpack handle asset paths automatically using Asset Modules:

1. Remove CopyWebpackPlugin entries for images/audio: We don't need manual copying anymore; Webpack will handle it.

   // Delete these lines from your plugins array
   { from: 'public/audio', to: 'audio' },
   { from: 'public/images', to: 'images' },
   

2. Add Asset Module rules to process images and audio:

   module: {
     rules: [
       // ... existing rules
       {
         test: /\.(png|jpg|jpeg|gif|mp3)$/i,
         type: 'asset/resource',
         generator: {
           filename: '[path][name][ext]', // Preserves original directory structure
         },
       },
     ],
   }
   

3. Import assets in your code instead of using hardcoded paths:

   import { Loader } from 'pixi.js';
   // Import assets directly
   import dogImage from '../public/images/animals/dog.png';
   import growlAudio from '../public/audio/growl.mp3';
   
   loader
     .add(dogImage) // Use the imported path here
     .add(growlAudio)
     .load(async () => {
       // Your load logic here
     });
   

This way, Webpack will bundle and copy assets to the build directory, and automatically inject the correct URL—no more 404s regardless of where you deploy.

Bonus: Verify Your Server Configuration #

Make sure your server serves the build folder as its root. For example, with Nginx:

server {
  listen 80;
  server_name your-domain.com;
  root /path/to/your/project/build;
  index index.html;

  # Handle SPA routing (if applicable)
  location / {
    try_files $uri $uri/ /index.html;
  }
}

内容的提问来源于stack exchange，提问作者I am L