在 Django 项目之外加载 javascript 文件

Question

Today, I'm trying to add web pack to my Django project. I got webpack working fine.

My goal is to load the new compiled javascript into my project's template/base.html.

This is the static section for my setting.py file of my project.

STATIC_URL = '/static/'

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)

STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                #'django.core.context_processors.csrf'
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
            'debug': DEBUG,
        },
    },
]

This is my webpack configuration:

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

const config = {
    context: __dirname,

    entry:  {
        app: './webpack/assets/javascript/entry/app.js'
    },

    output: {
        path: path.join(__dirname, 'public', 'assets'),
        publicPath: '/assets/',
        filename: "[name].js",
    },

    module: {
        rules: [
            {
                use: 'babel-loader',
                test: /\.js$/,
                exclude: /node_modules/
            },
        ]
    },

    plugins: [
        new BundleTracker({filename: './webpack-stats.json'}),
    ],

    resolve: {
        extensions: ['.js', '.json'],
        modules: ['./webpack/assets/javascript/', './vendor/assets/javascript', 'node_modules']
    }
};

module.exports = config;

As you can tell from my web pack.config, I'm creating an app.js file inside Public/assets on my root directory folder.

How can I add my public/assets folder to my static files, so I can add the following script on my project's folder templates/base.html?

<script src="app.js"></script>

This is the folder diagram:

The help will be appreciated.

Answer 1

The static template tag allows you to link to files saved in STATIC_ROOT .

So if you have

STATICFILES_DIRS = ( os.path.join(BASE_DIR, 'static/'),)

and your app.js file is saved in /path/to/my/project/static/public/assets/app.js then the following should link to your file

{% load static %}
<script src="{% static "public/assets/app.js" %}"></script>