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 --colorsThen delete all .pyc file to clear op stale tests.
find -name "*.pyc" -deleteAfter 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.3You 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