[英]Static files not found with webpack and django
The problem is that I can get access to the app on the browser but not static assets (js, jsx and images).问题是我可以访问浏览器上的应用程序,但不能访问静态资产(js、jsx 和图像)。
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:静态文件的部分 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 }
The webpack.config.js file: 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 }
Part of Dockerfile: 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: 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
There are two servers running Nginx t01 and t02.有两台服务器运行 Nginx t01 和 t02。 t01 is for proxy and t02 is where the Django project resides.
t01 用于代理,t02 是 Django 项目所在的位置。 The proxy server looks fine because the url works on the browser, only the static files can't be found (404 errors).
代理服务器看起来不错,因为 url 在浏览器上工作,只有找不到静态文件(404 错误)。
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.我在服务器上手动打包静态文件,因为会生成一个包含绝对路径信息的
webpack-stats.json
文件。
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
我找到了一个解决方案,只需将其添加到
urlpatterns
末尾的my_project/urls.py
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
In your HTML page did you load and render the bundle?在您的 HTML 页面中,您是否加载并呈现了包? This should be in your entry point Django template.
这应该在您的入口点 Django 模板中。
{% load render_bundle from webpack_loader %}
{% render_bundle 'app' %}
You also need the publicPath to match your static files setting in Django.您还需要 publicPath 来匹配 Django 中的静态文件设置。 Set it in webpack.config.js:
在 webpack.config.js 中设置:
output: {
path: path.resolve('assets/bundles/'),
publicPath: '/static/bundles/',
filename: "[name]-[hash].js",
},
If you run into this problem when running (Django) tests, make sure you have the webpack bundle built:如果您在运行 (Django) 测试时遇到这个问题,请确保您已经构建了 webpack 包:
./node_modules/.bin/webpack --watch --progress --config webpack.config.js --colors
Then delete all .pyc
file to clear op stale tests.然后删除所有
.pyc
文件以清除 op stale 测试。
find -name "*.pyc" -delete
After this the tests should no longer complain about webpack not being able to find the bundle in question.在此之后,测试不应再抱怨 webpack 无法找到有问题的包。
I've made certain changes and downgrading webpack-bundle-tracker from alpha to 0.4.3 You can find here webpack-bundle-tracker我进行了某些更改并将 webpack-bundle-tracker 从 alpha 降级到 0.4.3 你可以在这里找到webpack-bundle-tracker
or install using npm i webpack-bundle-tracker@0.4.3或使用npm i webpack-bundle-tracker@0.4.3安装
create vue.config.js file in frontend.在前端创建 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': ['\*']})
}
};
And in django settings.py file并在 django settings.py 文件中
INSTALLED_APPS = [
'webpack_loader',
]
TEMPLATES = [
{
'DIRS': [
str(BASE_DIR.joinpath('templates'))
],
}
]
Add these configuration at the bottom of the settings.py file在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'],
}
}
And index.html looks like this, 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>
These solved my problem.这些解决了我的问题。 And I also want help for using latest version of webpack-bundle-tracker with vueCli
而且我还需要有关将最新版本的 webpack-bundle-tracker 与 vueCli 一起使用的帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.