React+Django项目中Webpack不同步JS文件本地修改问题

Hey there! Let’s dig into why your local JavaScript changes aren’t showing up when you run python manage.py runserver for your React + Django Rest Framework app. I’ve run into this exact headache before, so here are the most common fixes to get your updates working:

1. Ensure Webpack is Watching for File Changes #

If Webpack isn’t actively monitoring your JS files, it won’t recompile your bundle when you make edits. Here’s how to fix that:

• Add a watch script to your package.json:

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

• Run npm run watch (or yarn watch) in a separate terminal tab—this will keep Webpack running and auto-recompile whenever you save changes.
• Double-check your webpack.config.js’s BundleTracker setup to make sure it’s updating the stats file Django uses:

  new BundleTracker({
    filename: './webpack-stats.json', // Match this path to what's in your Django settings
    publicPath: debug ? 'http://localhost:8080/' : 'https://your-amazon-cdn-url/'
  })
  

  The publicPath should point to your local dev server (or Webpack’s output directory) when in debug mode, not your CDN.

2. Disable Browser Caching #

Browsers love caching static files to speed things up—but that’s a pain when you’re developing. Here’s how to bypass it:

• Open Chrome DevTools (F12), go to the Network tab, and check the Disable cache box. Keep DevTools open while testing to ensure old files aren’t loaded.
• Alternatively, you can add a cache-busting query parameter to your bundle URL in Django templates for local development, but the DevTools trick is simpler.

3. Validate Django’s Webpack Loader & Static Settings #

Your Django setup might be pointing to old bundle files or the CDN instead of your local builds:

• In settings.py, make sure WEBPACK_LOADER uses the correct local public path when DEBUG is true:

  WEBPACK_LOADER = {
      'DEFAULT': {
          'BUNDLE_DIR_NAME': 'bundles/',
          'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
          'PUBLIC_PATH': 'http://localhost:8080/' if DEBUG else 'https://your-amazon-cdn-url/',
      }
  }
  

• Don’t run python manage.py collectstatic locally unless you absolutely need to. Collectstatic copies static files to STATIC_ROOT, but your local Webpack bundle should be served directly from Webpack’s output directory or dev server.

4. Check Webpack Dev Server (If You’re Using It) #

If you’re using webpack-dev-server for hot reloading:

• Make sure it’s running (usually with npm run start or a similar script).
• Confirm that Django’s PUBLIC_PATH matches the dev server’s URL (e.g., http://localhost:8080/). Webpack dev server serves bundles from memory, so Django needs to fetch them from this URL instead of disk.

5. Clear Django’s Template Cache #

Sometimes Django caches template renderings, so it won’t pick up updated bundle references. To fix this:

• Ensure DEBUG = True in your local settings.py—Django disables template caching automatically when debug mode is on.
• If you still have issues, run python manage.py clearcache (available in Django 3.2+) to wipe any cached template data.

Start with checking if Webpack is in watch mode first—that’s the most common culprit. If that doesn’t work, work through the other steps one by one, and you should see your changes show up in no time!

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