解决 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保持一致。