用webpack和django找不到静态文件

Question

问题是我可以在浏览器上访问该应用程序，但不能访问静态资产（js，jsx和图像）。

我正在使用的技术：

django-webpack-loader 0.2.4
React 0.14
Django 1.8.5
Python 2.7

静态文件的Django设置的一部分：

103 # Static files (CSS, JavaScript, Images)
104 # https://docs.djangoproject.com/en/1.8/howto/static-files/
105 
106 STATIC_URL = '/static/'
107 STATICFILES_DIRS = (
108     os.path.join(BASE_DIR, 'assets'),
109 )
110 
111 WEBPACK_LOADER = {
112     'DEFAULT': {
113         'BUNDLE_DIR_NAME': 'bundles/',
114         'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
115     }
116 }

webpack.config.js文件：

  4 // Dependencies
  5 var path = require('path')
  6 var webpack = require('webpack')
  7 var BundleTracker = require('webpack-bundle-tracker')
  8 
  9 module.exports = {
 10     // The base directory (absolute path) for resolving the entry option.
 11     context: __dirname,
 12 
 13     entry: './assets/js/index',
 14 
 15     output: {
 16         // Where the compiled bundle to be stored.
 17         path: path.resolve('./assets/bundles/'),
 18         // Naming convention webpack should use.
 19         filename: '[name]-[hash].js'
 20     },
 21 
 22     plugins: [
 23         // Where webpack stores data about bundles.
 24         new BundleTracker({filename: './webpack-stats.json'}),
 25         // Makes jQuery available in every module.
 26         new webpack.ProvidePlugin({
 27             $: 'jquery',
 28             jQuery: 'jquery',
 29             'window.jQuery': 'jquery'
 30         })
 31     ],
 32 
 33     module: {
 34         loaders: [
 35             // A regexp that tells webpack user the following loaders on all
 36             // .js and .jsx files.
 37             {test: /\.jsx?$/,
 38                 exclude: /ndoe_modules/,
 39                 loader: 'babel-loader',
 40                 query: {
 41                     presets: ['react']
 42                 }
 43             },
 44             // use ! to chain loaders
 45             { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' },
 46             {test: /\.css$/, loader: 'style-loader!css-loader'},
 47             // Inline base64 URLs for <=8k images, direct URLs for the rest.
 48             {test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
 49         ]
 50     },
 51 
 52     resolve: {
 53         // Where webpack looks for modules.
 54         modulesDirectories: ['node_modules'],
 55         // Extensions used to resolve modules.
 56         extensions: ['', '.js', '.jsx']
 57     }
 58 }

Dockerfile的一部分：

  3 COPY start.sh /opt/start.sh
  4 
  5 ADD . /opt/
  6 
  7 RUN /opt/node_modules/webpack/bin/webpack.js --config /opt/webpack.config.js
  8 
  9 RUN chmod +x /opt/start.sh

Django项目的层次结构：

my_project/
??? Dockerfile
??? api
??? assets
??? my_project
??? db.sqlite3
??? manage.py
??? node_modules
??? package.json
??? requirements.txt
??? static
??? templates
??? webpack-stats.json
??? webpack.config.js

有两个运行Nginx t01和t02的服务器。t01用于代理，而t02是Django项目所在的位置。代理服务器看起来不错，因为该网址可在浏览器上运行，但仅找不到静态文件（404错误）。

我将在服务器上手动执行静态文件捆绑，因为将webpack-stats.json生成一个包含绝对路径信息的文件。

但是，该项目可以在我的本地计算机上正常运行。

[编辑]：

我发现了一个解决方案，只需将它添加到my_project/urls.py在年底urlpatterns

] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

Answer 1

在您的 HTML 页面中，您是否加载并呈现了包？这应该在您的入口点 Django 模板中。

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

您还需要 publicPath 来匹配 Django 中的静态文件设置。在 webpack.config.js 中设置：

output: {
    path: path.resolve('assets/bundles/'),
    publicPath: '/static/bundles/',
    filename: "[name]-[hash].js",
},