用webpack和django找不到静态文件 [英] Static files not found with webpack and django

问题描述

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

我正在使用的技术：

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

静态文件的部分Django设置：

  103＃静态文件（CSS，JavaScript，图像）
 104＃https://docs.djangoproject.com/zh/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 //依赖项
 5 var path = require（'path '）
 6 var webpack = require（'we bpack'）
 7 var BundleTracker = require（'webpack-bundle-tracker'）
 8 
 9 module.exports = {
 10 //基本目录（绝对路径）解决输入选项。 
 11上下文：__dirname，
 12 
 13条目：'./assets/js/index'，
 14 
 15输出：{
 16 / /将编译后的捆绑软件存储在哪里。 
 17 path：path.resolve（’./ assets / bundles /’），
 18 //应该使用webpack的命名约定。 
 19文件名：'[name]-[hash] .js'
 20}，
 21 
 22插件：[
 23 // Webpack存储有关以下内容的数据的位置捆绑。 
 24新的BundleTracker（{filename：’./webpack-stats.json’}），
 25 //使jQuery在每个模块中可用。 
 26 new webpack.ProvidePlugin（{
 27 $：'jquery'，
 28 jQuery：'jquery'，
 29'window.jQuery'：'jquery'
 30}} 
 31]，
 32 
 33模块：{
 34装载程序：[
 35 //一个正则表达式，它告诉webpack用户以下所有装载程序
 36 // .js和.jsx文件。 
 37 {test：/\.jsx?$/，
 38排除：/ ndoe_modules /，
 39 loader：'babel-loader'，
 40查询：{
 41预设：['react'] 
 42} 
 43}，
 44 //使用！链式装载机
 45 {测试：/\.less$/，装载机：'style-loader！css-loader！less-loader'}，
 46 {测试：/\.css$ /，loader：'style-loader！css-loader'}，
 47 //≤8k图像的内联base64 URL，其余为直接URL。 
 48 {test：/\.(png|jpg)$/，loader：'url-loader？limit = 8192'} 
 49] 
 50}，
 51 
 52 resolve：{
 53 // webpack在哪里寻找模块。 
 54 modulesDirectories：[‘node_modules’]，
 55 //用于解析模块的扩展名。 
 56扩展名：[''，'.js'，'.jsx'] 
 57} 
 58} 
  

Dockerfile的一部分：

  3 COPY start.sh / opt / start。 sh 
 4 
 5添加。 / opt / 
 6 
 7运行/opt/node_modules/webpack/bin/webpack.js --config /opt/webpack.config.js 
 8 
 9运行chmod + x /opt/start.sh 
  

Django项目的层次结构：

  my_project / 
├──Dockerfile 
├──api 
├──资产
├──my_project 
├──db.sqlite3 
├──manage.py 
├──node_modules 
├──package.json 
├──requirements.txt 
├──静态
├──模板
├──webpack-stats.json 
└──webpack.config.js 
  

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

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

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

：

我找到了一个解决方案，只是将其添加到 urlpatterns my_project / urls.py 中>

] +静态（settings.STATIC_URL，document_root = settings.STATIC_ROOT）

解决方案

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

  {％从webpack_loader中加载render_bundle％} 
 {％render_bundle'app'％} 
  

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

 输出：{
 path：path.resolve（'assets / bundles /'），
 publicPath：'/ static / bundles /'，
文件名： [name]-[hash] .js，
}，
  

The problem is that I can get access to the app on the browser but not static assets (js, jsx and images).

Technologies I am using:

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

Part of Django settings for static files:

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 }

The webpack.config.js file:

  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 }

Part of 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

Hierarchy of the Django project:

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

There are two servers running Nginx t01 and t02. t01 is for proxy and t02 is where the Django project resides. The proxy server looks fine because the url works on the browser, only the static files can't be found (404 errors).

I manually do the static files bundle on the server because there will be a webpack-stats.json files generated which contains the absolute path info.

However, this project runs properly on my local computer.

[EDIT]:

I found a solution, just to add this to my_project/urls.py at the end of urlpatterns

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

解决方案

In your HTML page did you load and render the bundle? This should be in your entry point Django template.

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

You also need the publicPath to match your static files setting in Django. Set it in webpack.config.js:

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

这篇关于用webpack和django找不到静态文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！