使用webpack和django时找不到静态文件

Question

使用webpack和django时找不到静态文件

12

问题在于我可以通过浏览器访问应用程序，但无法获取静态资源（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 项目所在的地方。代理服务器看起来没问题，因为浏览器上的 URL 可以正常工作，只有静态文件找不到（404 错误）。

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

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

[编辑]：

我找到了一个解决方法，只需将这个代码添加到 my_project/urls.py 的 urlpatterns 末尾

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

- ChesterL

3个回答

3

如果在运行（Django）测试时遇到此问题，请确保已构建Webpack捆绑包：

./node_modules/.bin/webpack --watch --progress --config webpack.config.js --colors

然后删除所有的.pyc文件以清除旧测试。

find -name "*.pyc" -delete

在此之后，测试不应再抱怨webpack无法找到相关的捆绑文件。

- Bono

1

这对我有用。它生成了webpack-bundle.json文件。但是它也锁定了，最终我需要使用Cntrl/C来中断它。然后Django开始工作了。谢谢。 - dlink

1

我已经进行了一些更改，将 webpack-bundle-tracker 从 alpha 版本降级到 0.4.3 版本。你可以在这里找到 webpack-bundle-tracker。

或者使用 npm i webpack-bundle-tracker@0.4.3 进行安装。

在前端中创建 vue.config.js 文件。

const BundleTracker = require('webpack-bundle-tracker');

module.exports = {
    publicPath: "http://0.0.0.0:8080",
    // output dir default buldle file ocation in dist
    outputDir: "./dist/",

    chainWebpack: config => {
        config.optimization.splitChunks(false)

        config.plugin('BundleTracker').use(BundleTracker, [
            {
                // filename: './webpack-stats.json'
                filename: './webpack-stats.json'
            }
        ])

        config.resolve.alias.set('__STATIC__', 'static')

        config.devServer
            .public('http://0.0.0.0:8080')
            .host('0.0.0.0')
            .port(8080)
            .hotOnly(true)
            .watchOptions({poll: 1000})
            .https(false)
            .headers({'Access-Control-Allow-Origin': ['\*']})
    }
};

在 Django 的 settings.py 文件中。

INSTALLED_APPS = [
    'webpack_loader',
]

TEMPLATES = [
{
'DIRS': [
            str(BASE_DIR.joinpath('templates'))
        ],
}
]

在settings.py文件底部添加以下配置。

WEBPACK_LOADER = {
    'DEFAULT': {
        'CACHE': not DEBUG,
        'BUNDLE_DIR_NAME': 'webpack_bundles/', # must end with slash
        'STATS_FILE': str(BASE_DIR.joinpath('frontend', 'webpack-stats.json')),
        'POLL_INTERVAL': 0.1,
        'TIMEOUT': None,
        'IGNORE': [r'.+\.hot-update.js', r'.+\.map'],        
    }
}

而 index.html 看起来像这样，

{% load render_bundle from webpack_loader %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <title>Django Vue-3X iNTEGRATION</title>
</head>
<body>
    <h1>HELLO FROM DJANGO</h1>

    <div id="app">
        <h1>HELLO FROM Vue</h1>
    </div>

    {% render_bundle 'app' %}
</body>
</html>

这些解决了我的问题。我还想使用最新版本的webpack-bundle-tracker与vueCli一起使用。

- Vkash Poudel

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sww314 · Accepted Answer

在你的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",
},