Django集成Webpack教程与配置指南

本文深入讲解了Django与Webpack的高效集成方案，涵盖开发与生产环境下的核心痛点：如何让Django正确识别Webpack构建产物、避免硬编码资源路径导致的404问题、实现开发时热更新与代理共存、确保collectstatic与Webpack构建顺序严谨可靠，并通过django-webpack-loader动态注入带contenthash的资源链接。文章直击实践中最易踩坑的细节——如STATICFILES_DIRS路径配置陷阱、publicPath与STATIC_URL语义混淆、webpack-stats.json部署遗漏、符号链接失效等，提供可落地的配置示例和排错思路，助你构建稳定、可维护、支持哈希指纹与CDN的现代化Django前端工作流。

Webpack 构建产物怎么让 Django 找得到

Django 默认只从 STATICFILES_DIRS 和各 app 的 static/ 目录收集静态文件，而 Webpack 输出的 dist/ 或 build/ 是独立路径，不自动纳入管理。直接把构建结果扔进 static/ 会导致 Git 冲突、重复拷贝、哈希文件名失效等问题。

• 把 Webpack 输出目录（如 ./dist）加进 STATICFILES_DIRS，但要确保它在 manage.py collectstatic 时被扫描到
• 在 settings.py 中配置：

  STATICFILES_DIRS = [
      BASE_DIR / "static",
      BASE_DIR / "dist",  # ← 这里是 Webpack 输出目录
  ]

• 必须确认 dist/ 是相对 manage.py 所在位置的路径；如果 Webpack 配置了 output.path: path.resolve(__dirname, '../staticfiles')，那就该把 staticfiles 加入 STATICFILES_DIRS
• 别用符号链接代替路径添加——collectstatic 不解析 symlink，会跳过

如何避免 Django 模板里硬编码 JS/CSS 路径

Webpack 开启 contenthash 后，JS 文件名带哈希（如 main.a1b2c3.js），每次构建都变。Django 模板里写死