运行yarn run build-assets遇Webpack错误，Django+Vue缺失webpack-stats.json

Let's walk through exactly how to generate that missing webpack-stats.json file so your Django server can locate your Vue.js assets. This file is critical because it tells Django where your bundled frontend files live after Webpack processes them.

Step 1: Install the Webpack Bundle Tracker Plugin #

First, you'll need a plugin that automatically generates the stats file during the Webpack build process. The most reliable tool for this is webpack-bundle-tracker. Install it via npm:

npm install webpack-bundle-tracker --save-dev

Step 2: Configure Webpack to Generate the Stats File #

Next, update your Webpack configuration to use this plugin. The setup varies slightly depending on whether you're using raw Webpack or Vue CLI:

Option A: Raw Webpack (webpack.config.js) #

Add the plugin to your existing Webpack config like this:

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

module.exports = {
  // Your existing entry, output, and module rule configurations
  output: {
    path: path.resolve(__dirname, './dist'), // Directory for bundled assets
    filename: '[name].[hash].js'
  },
  plugins: [
    new BundleTracker({
      path: __dirname, // Directory where the stats file will be saved
      filename: 'webpack-stats.json' // Name of the generated stats file
    })
  ]
};

Option B: Vue CLI (vue.config.js) #

If you're using Vue CLI to manage your frontend, integrate the plugin via configureWebpack:

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

module.exports = {
  configureWebpack: {
    plugins: [
      new BundleTracker({
        filename: './webpack-stats.json' // Path relative to your Vue project root
      })
    ]
  },
  // Optional: Set a specific output directory for bundled assets
  outputDir: './dist'
};

Step 3: Run Webpack to Generate the File #

Now execute your Webpack build command to create the stats file. For development mode (with hot reloading):

npm run dev

For production-ready bundles:

npm run build

After running this, you should see webpack-stats.json appear in the directory you specified in the plugin configuration.

Step 4: Verify Django's Path Configuration #

Double-check that your Django settings.py points to the correct location of the stats file. Here's a standard setup:

import os
from pathlib import Path

BASE_DIR = Path(__file__).resolve().parent.parent

WEBPACK_LOADER = {
    'DEFAULT': {
        'BUNDLE_DIR_NAME': 'dist/', # Matches your Webpack output directory
        'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'), # Exact path to the generated stats file
    }
}

Ensure BASE_DIR correctly points to your project root, and the STATS_FILE path matches where Webpack saved the file.

Troubleshooting Tips #

• If the file still doesn't generate, check your Webpack terminal output for errors—typos in your config or missing dependencies could break the build.
• Confirm the directory where Webpack is trying to save the stats file has write permissions.
• If your frontend lives in a subdirectory (e.g., a frontend folder inside your Django project), adjust the path in the BundleTracker config and the STATS_FILE path in Django to match the nested structure.

内容的提问来源于stack exchange，提问作者khadija.EL