webpack-bundle-tracker not creating webpack-stats.json?

user_11122340 0
Viewed 2485

I am trying to use Vue and Django together as described in this article. Everything seems to be working except for the webpack-bundle-tracker. I'm pretty sure that webpack-bundle-tracker is not even installed as this happens when I run yarn add webpack-bundle-tracker --dev:

yarn add v1.22.4
info No lockfile found.
[1/4]   Resolving packages...
error An unexpected error occurred: "https://registry.yarnpkg.com/core-js: self signed certificate in certificate chain".

However when I run npm install --save-dev webpack-bundle-tracker it seems to work? but nothing really changes and no webpack-stats.json file is generated.

The other thing could be the django-webpack-loader, as when I ran pip install django-webpack-loader gives off a bunch of permissions errors, but it worked when I ran pip install django-webpack-loader --trusted-host pypi.python.org --trusted-host files.pythonhosted.org --trusted-host pypi.org.

The error django gives me when I try to open my vue/django test page:

Error reading /Users/$ME/Dev/digiproj/vue_frontend/webpack-stats.json. Are you sure webpack has generated the file and the path is correct?

Just not sure where to go from here and would greatly appreciate any help.

vue.js webpack node.js django python
2 Answers

I had the same issue, also running Django with django-webpack-loader, and I also found that the webpack-stats.json file was not being generated. I fixed it by downgrading webpack-bundle-tracker to 0.4.3. I'm not sure why the latest version of this package does not work.

user_71026980

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

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

user_104117340
Related