解决 Webpack 和 Django 的配置问题

问题1： 使用 python manage.py runserver 启用 django 服务器之后，访问 http://localhost:8000 但是页面没有内容。打开开发者工具： 控制台报错 网络请求都是成功的，但是返回的 js 和 css 文件内容其实都是index.html文件的内容。这样当然会报错啦。 网络请求内容 分析 这个项目是使用 Facebook 提供的 creat-react-app 生成的，之后再整合了 Django。因此，在找到问题症结的过程中，以下几个文档是帮助最大的： Modern Django： http://v1k45.com/blog/modern-django-part-1-setting-up-django-and-react/ 。关于如何使用 creat-react-app 创建项目并跟 django 整合到一起的教程。 Repository for "Modern Django" tutorial： https://github.com/v1k45/ponynote 。 上面教程的代码仓库。分支对应了教程中的几个步骤。 Transparently use webpack with django：https://github.com/owais/django-webpack-loader 。django-webpack-loader 的代码仓库，以及使用文档。 可以肯定的是，问题是出在 webpack.config.prod.js 和 settings.py这两个文件中。 修改前后 settings.py 文件主要修改 STATIC_URL。 //settings.py WEBPACK_LOADER = { 'DEFAULT': { // 修改前 // 'BUNDLE_DIR_NAME': 'bundle/', # change when production // 修改后 'BUNDLE_DIR_NAME': './', # change when production 'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats-prod.json'), # change when production } } // 修改前 // STATIC_URL = '../build/' // 修改后 STATIC_URL = '/static/' webpack.config.prod.js 文件主要修改 publicPath。 // 修改前 // const publicPath = './'; // 修改后 const publicPath = "static/"; // 修改打包文件输出的路径。 // 修改前 // const cssFilename = 'static/css/[name].[contenthash:8].css'; // 修改后 const cssFilename = 'css/[name].[contenthash:8].css'; 在 index.html 中对应的静态文件路径就会是publicPath+filename，比如static/js/main.12345678.js，对应的网络请求是http://locahost:8000/static/js/main.12345678.js。 因为 settings.py 文件中 STATIC_URL 为/static/，以及配置的静态文件目录STATICFILES_DIRS中有一项是os.path.join(BASE_DIR,'build')，即打包文件所在路径，所以访问http://locahost:8000/static/就是访问项目中的build文件夹。因此最终请求的是项目中的build/js/main.12345678.js。 综上，需要注意的是，settings.py 中的 STATIC_URL+BUNDLE_DIR_NAME组成的路径 需要跟 webpack.config.prod.js中的publicPath保持一致。

本文章由javascript技术分享原创和收集