Django怎么集成前端构建工具_Python配置Webpack与Django联动-Python教程-PHP中文网

webpack构建产物需通过staticfiles_dirs引入django，配合django-webpack-loader动态注入带hash的资源路径，并在开发时用publicpath代理实现热更新，生产环境须先构建再collectstatic。

django怎么集成前端构建工具_python配置webpack与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 模板里写死 <script src="/static/main.js"></script> 就会 404。

用 django-webpack-loader 插件，它读取 Webpack 生成的 webpack-stats.json，动态替换模板中的资源路径

安装后，在 settings.py 中配好：

WEBPACK_LOADER = {
    'DEFAULT': {
        'STATS_FILE': BASE_DIR / 'webpack-stats.json',
    }
}

模板中改用：

{% load render_bundle from webpack_loader %}
{% render_bundle 'main' %}

，它会自动插入 main chunk 对应的 JS + CSS

确保 Webpack 配置里开了 stats: { assets: true }，且插件能读到真实路径（开发时用 webpack-dev-server 需额外配 publicPath）

开发时 Webpack Dev Server 和 Django 开发服务器怎么共存

两个服务默认都跑 localhost:8000，端口冲突；更关键的是，Django 模板里引用的 /static/xxx.js 在开发时其实该走 Webpack 的内存文件系统（不是磁盘上的 dist/），否则看不到热更新。

Python Use Agent

智能执行Python任务，自动生成、执行代码并反馈结果，无需额外配置，兼容旧命令。

下载

让 Webpack Dev Server 跑在 localhost:3000，Django 继续用 8000，然后用代理把 /static/ 请求转发过去
在 Webpack 配置的 devServer.proxy 里加：
```
proxy: {
  '/static/': {
    target: 'http://localhost:8000',
    changeOrigin: true,
  }
}
```
——不对，这是反向；正确做法是 Django 模板里让静态资源走 http://localhost:3000/static/，所以得配 Webpack 的 publicPath: 'http://localhost:3000/static/'
同时在 settings.py 里临时改 STATIC_URL = 'http://localhost:3000/static/'（仅 DEBUG=True 时），这样 render_bundle 输出的 script 标签 URL 才对
别忘了关掉 Django 的 DEBUG=False 下的静态文件服务，否则本地调试时容易混淆来源

生产环境部署时 collectstatic 和 Webpack 构建顺序很重要

collectstatic 会清空 STATIC_ROOT 并复制所有 STATICFILES_DIRS 下的文件。如果 Webpack 还没运行，dist/ 为空，那上线后页面就缺 JS。

CI/CD 流水线里，必须保证 Webpack 构建完成、输出稳定后再执行 python manage.py collectstatic --noinput
不要在 STATIC_ROOT 里直接跑 Webpack —— 它可能被 collectstatic 清掉，或权限出问题
如果用了 django-webpack-loader，记得把 webpack-stats.json 也放进 STATICFILES_DIRS 或单独 copy 到可读位置，不然线上找不到 stats 文件会报错 Stats file not found: /path/to/webpack-stats.json
检查 webpack-stats.json 里的路径是否为相对路径；如果是绝对路径（如 /static/main.js），而你又配了 CDN 域名，就得用 WEBPACK_LOADER['DEFAULT']['PUBLIC_PATH'] 覆盖