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

by

6👍

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",
},
👤sww314

3👍

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.

👤Bono

1👍

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

INSTALLED_APPS = [
    'webpack_loader',
]

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

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

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,

{% 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

👤Vkash Poudel

Leave a comment