I'm developing web app using Django as a backend and Vue js as a frontend. I connected them via webpack. When I develop app in Dev mode, everything is good, I don't use chunks, which are created using npm run build. But when it comes to Stage or Prod mode, when DEBUG=False on Django, and npm run build on vue js, to build all static files, I got error
Refused to execute http://localhost:8000/static/sections_dist/js/chunk-common.34112dfe.js as script because "X-Content-Type: nosniff" was given and its Content-Type is not a script MIME type.
Did not parse stylesheet at 'http://localhost:8000/static/sections_dist/css/chunk-common.677f6644.css' because non CSS MIME types are not allowed in strict mode.
maybe I'm using incorrect webpack settings, please help me with that...
My webpack.config.js:
const BundleTracker = require("webpack-bundle-tracker")
const path = require('path')
module.exports = {
publicPath: "/static/sections_dist/",
outputDir: '../project/static/sections_dist/',
chainWebpack: config => {
// config.optimization
// .splitChunks(false)
config
.plugin('BundleTracker')
.use(BundleTracker, [{filename: '../frontend/webpack-stats.json'}])
config.devServer
.public('http://0.0.0.0:8000')
.host('0.0.0.0')
.port(8080)
.hotOnly(true)
.watchOptions({poll: 1000})
.https(false)
.headers({
'Access-Control-Allow-Origin': ['*']
})
}
}
my base.html body, where I render bundles:
<body>
<div id="app">
</div>
{% if not settings.DEBUG %}
{% render_bundle 'chunk-common' 'js' 'SECTIONS' %}
{% render_bundle 'chunk-vendors' 'js' 'SECTIONS' %}
{% render_bundle 'chunk-vendors' 'css' 'SECTIONS' %}
{% render_bundle 'chunk-common' 'css' 'SECTIONS' %}
{% endif %}
{% block js_application %}
{% endblock %}
</body>
and html file for rendering src in frontend, which is inheriting from that base.html:
{% load render_bundle from webpack_loader %}
{% block js_application %}
{% render_bundle 'anonymous' 'js' 'SECTIONS' %}
{% render_bundle 'anonymous' 'css' 'SECTIONS' %}
{% endblock %}
So after several hours I found out what went wrong.
I had an invalid paths of static files in django configuration. After debugging and changing urls from
path('static/<str:path>/', serve,
{'document_root': settings.STATIC_ROOT}),
path('media/<str:path>/', serve,
{'document_root': settings.MEDIA_ROOT}),
to
re_path(r'^static/(?P<path>.*)$', serve,
{'document_root': settings.STATIC_ROOT}),
re_path(r'^media/(?P<path>.*)$', serve,
{'document_root': settings.MEDIA_ROOT}),
everything got worked
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments