使用Webpack与Node.js时背景图在生产环境不显示的解决方法

Got it, let’s troubleshoot why your background images are disappearing when deploying to Heroku, even though they work perfectly in your local dev environment. After reviewing your configs, here’s the root cause and step-by-step fixes:

What’s Going Wrong #

1. Static Resource Path Mismatch: Your Express server isn’t pointing to the correct directory for production-built assets (like your images). Right now it’s serving files from the root folder, but Webpack is bundling everything into the dist directory.
2. Missing Webpack Public/Output Paths: File-loader isn’t being told where to output images in production, and Webpack doesn’t know the correct public URL to reference those images in your CSS.

Step 1: Fix Webpack Configs #

First, update your Webpack setup to ensure images are bundled to the right location and referenced correctly.

Update webpack.common.js (or webpack.prod.js) #

Modify the output section to add a publicPath—this tells Webpack what URL prefix to use for assets in production:

output: {
  path: path.resolve(__dirname, './dist'),
  filename: 'bundle.js',
  publicPath: '/dist/' // Critical for production asset references
}

Then adjust the file-loader rule to explicitly set where images are output and their public URL:

{
  test: /\.(png|jpg|gif|jpeg)$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[name].[ext]', // Keep original filenames (optional, but easier to debug)
        outputPath: 'media/images/', // Output images to dist/media/images
        publicPath: 'dist/media/images/' // URL path to reference images in CSS
      }
    }
  ]
}

Step 2: Correct Express Server Static Serving #

Your server.js is currently serving static files from the root directory, but production assets live in dist. Update the static middleware:

// Replace this line:
// app.use(express.static(__dirname));

// With this:
app.use(express.static(path.join(__dirname, 'dist')));

This tells Express to look for static files (like your images and bundled JS) in the dist folder, which is where Webpack outputs everything during the production build.

Step 3: Verify Heroku Build Scripts #

Double-check your package.json has the correct build and start scripts—Heroku relies on these to deploy your app:

"scripts": {
  "build": "webpack --config webpack.prod.js",
  "start": "node server.js"
}

Make sure npm run build generates the dist directory with all your assets before starting the server.

Step 4: Confirm CSS Image Paths #

Your SCSS import url('../../media/images/book4.jpg') is correct relative to your source files—file-loader will resolve this path and copy the image to dist/media/images as configured. No changes needed here!

Why This Works #

• Local Dev: Webpack-dev-server serves assets from memory, so pathing is more forgiving. The fixes above won’t break your dev environment—webpack-dev-server will respect the publicPath too.
• Production: With the updated configs, Webpack generates CSS with the correct URL to your images, and Express serves those images directly from the dist folder where they’re bundled.

After making these changes, redeploy to Heroku and your background images should show up as expected!

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