如何修改WebpackDevServer配置忽略React项目public/uploads监听

算力阿峰

2026-5-9

Fix Auto-Refresh When Uploading Files to public/uploads in React Project

Hey there! I’ve dealt with this exact frustration before—uploading files to public/uploads triggering an unwanted page refresh can really break your development flow. Let’s fix this by modifying your WebpackDevServer.config.js file properly:

Step 1: Add the `path` module import

First, we need to safely construct the path to your uploads folder across different operating systems. Add this line at the top of your file (with the other require statements):

const path = require('path');

Step 2: Update the `watchOptions.ignored` configuration

Look for the watchOptions section in the returned config object. Right now it only ignores files from your src directory via ignoredFiles(paths.appSrc). We need to extend this to include the public/uploads folder.

Replace the original:

watchOptions: {
  ignored: ignoredFiles(paths.appSrc),
},

With this updated version:

watchOptions: {
  ignored: [
    ignoredFiles(paths.appSrc),
    // Ignore changes in the public/uploads folder
    path.join(paths.appPublic, 'uploads')
  ],
},

Why this works

Webpack Dev Server is set to watch your public directory (via watchContentBase: true) so it can reload when static assets change. When you upload files to uploads, it detects those new files as changes and triggers a refresh. By adding path.join(paths.appPublic, 'uploads') to the ignored list, you’re telling the dev server to completely skip monitoring that folder for changes.