Ошибка при чтении webpack-stats.json. Вы уверены, что webpack сгенерировал файл и путь к нему правильный?

Я установил django с django и получил эту ошибку во время выполнения:

Error reading webpack-stats.json. Are you sure webpack has generated the file and the path is correct?

enter image description here

наряду с manage.py:

vue create frontend

По умолчанию ([Vue 3] babel, eslint) 

cd frontend
npm run serve

список файлов в директории frontend таков:

babel.config.js
jsconfig.json
node_modules
package.json
package-lock.json
public
README.md
src
vue.config.js


npm --version

6.14.15

nodejs --version

v10.19.0

node --version

v14.17.6

npm list webpack-bundle-tracker

└── webpack-bundle-tracker@1.5.0

pip install django-webpack-loader
pip freeze

django-webpack-loader==1.5.0

INSTALLED_APPS = (
  ...
  'webpack_loader',
  ...
)


# vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true
})

index.html

{% load render_bundle from webpack_loader %}
{% load static %}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title></title>    

    {% render_bundle 'app' 'css' %}
  </head>
  <body>
            <div class="main">
                <main>
                  <div id="app">
                    
                  </div>
                    {% endblock %}
                </main>
            </div>
    {% render_bundle 'app' 'css' %}
  </body>
</html>

Вам необходимо импортировать и добавить плагин webpack-bundle-tracker в vue.config.js:

const { defineConfig } = require('@vue/cli-service')
const BundleTracker = require('webpack-bundle-tracker')

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    plugins: [
      new BundleTracker({ path: __dirname, filename: 'webpack-stats.json' }),
    ],
  },
})

vue.config.js


const { defineConfig } = require('@vue/cli-service')
const BundleTracker = require('webpack-bundle-tracker')

module.exports = defineConfig({
  publicPath: process.env.NODE_ENV === 'production' ? '/static/dist/' : 'http://localhost:8080',
  outputDir: '../static/dist',
  indexPath: '../templates/index.html',
  transpileDependencies: true,
  configureWebpack: {
    plugins: [
      new BundleTracker({ path: __dirname, filename: 'webpack-stats.json' }),
    ],
  },
})

структура файлов следующая:

mainapp/
frontend/
   vue.gonfig.js
   package.json
   webpack-stats.json
static/
template/
manage.py

также я запускаю npm run build перед npm run serve

settings.py:

STATIC_URL = '/static/'
STATICFILES_DIRS=[
    os.path.join(BASE_DIR,'assets')
]

WEBPACK_LOADER = {
  'DEFAULT': {
    'CACHE': not DEBUG,
    'BUNDLE_DIR_NAME': '/bundles/',
    'STATS_FILE': os.path.join(BASE_DIR,'frontend', 'webpack-stats.json'),
    'POLL_INTERVAL': 0.1,
    'IGNORE': [r'.+\.hot-update.js', r'.+\.map'],
  }
}
Вернуться на верх