Django集成Webpack生产环境问题求助：Vue项目打包后无法运行

Hey there, let's work through this problem together—this is a super common gotcha when splitting bundles with Webpack in a Django setup! Here's how to fix it:

1. Render All Split Bundles in Your Template #

The core issue is that your app bundle now depends on the manifest and vendor bundles to run properly in production. You can't just render app alone—you need to load them in the correct order:

{% load render_bundle from webpack_loader %}
<!-- Load Webpack's runtime manifest first (handles module loading logic) -->
{% render_bundle 'manifest' %}
<!-- Load third-party dependencies next (Vue, etc.) -->
{% render_bundle 'vendor' %}
<!-- Finally load your application-specific code -->
{% render_bundle 'app' %}

The order here is non-negotiable: manifest sets up Webpack's module system, vendor provides the third-party libraries your app relies on, and app uses both to execute your code.

2. Verify Your Webpack CommonsChunkPlugin Configuration #

Double-check that your Webpack production config is correctly generating all three bundles. A standard working setup looks like this:

const webpack = require('webpack');
const path = require('path');

module.exports = {
  // ... other production configs (mode: 'production', devtool: 'source-map', etc.)
  entry: {
    app: './src/main.js', // Your Vue app entry point
    vendor: ['vue', 'axios'] // List all third-party dependencies here
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      names: ['vendor', 'manifest'],
      // Automatically extract node_modules dependencies into the vendor bundle
      minChunks: module => module.context && module.context.includes('node_modules')
    })
  ],
  output: {
    filename: '[name].[chunkhash].js', // Hashed filenames for cache busting
    path: path.resolve(__dirname, '../static/dist') // Match a subdir in Django's static folder
  }
};

This setup ensures vendor holds all external libraries, manifest manages Webpack's runtime, and app contains only your custom code.

3. Confirm Django's Webpack Loader & Static Configs #

Make sure your Django production settings are aligned with your Webpack setup:

• Point WEBPACK_LOADER to your production-generated webpack-stats.json (created when you run webpack --mode production):

WEBPACK_LOADER = {
  'DEFAULT': {
    'BUNDLE_DIR_NAME': 'dist/',
    'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats-prod.json'),
  }
}

• Run python manage.py collectstatic to copy your Webpack-generated bundles into Django's STATIC_ROOT directory—this is mandatory for production, as Django serves static files from this location.
• Double-check that STATIC_URL and STATIC_ROOT are correctly configured for your production environment (e.g., STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')).

4. Optional: Simplify with a Custom Template Tag #

If you don't want to repeat three render_bundle calls across multiple templates, create a custom tag to handle it in one line:

# templatetags/webpack_tags.py
from django import template
from webpack_loader.utils import get_as_tags

register = template.Library()

@register.simple_tag
def render_all_bundles():
    required_bundles = ['manifest', 'vendor', 'app']
    html_tags = []
    for bundle in required_bundles:
        html_tags.extend(get_as_tags(bundle))
    return '\n'.join(html_tags)

Then use it in your template like this:

{% load webpack_tags %}
{% render_all_bundles %}

That should get your Vue app running smoothly in production!

内容的提问来源于stack exchange，提问作者Toby