[Solved]-Static files not found with webpack and django


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",


If you run into this problem when running (Django) tests, make sure you have the webpack bundle built:

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

Then delete all .pyc file to clear op stale tests.

find -name "*.pyc" -delete

After this the tests should no longer complain about webpack not being able to find the bundle in question.



I’ve made certain changes and downgrading webpack-bundle-tracker from alpha to 0.4.3
You can find here webpack-bundle-tracker

or install using npm i webpack-bundle-tracker@0.4.3

create vue.config.js file in frontend.

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

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

    chainWebpack: config => {

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

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

            .watchOptions({poll: 1000})
            .headers({'Access-Control-Allow-Origin': ['\*']})

And in django settings.py file


'DIRS': [

Add these configuration at the bottom of the settings.py file

    '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,

{% load render_bundle from webpack_loader %}
<!DOCTYPE html>
<html lang="en">
    <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>
    <h1>HELLO FROM DJANGO</h1>

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

    {% render_bundle 'app' %}

These solved my problem.
And I also want help for using latest version of webpack-bundle-tracker with vueCli

πŸ‘€Vkash Poudel

Leave a comment