Question

今天，我正在尝试将web包添加到我的Django项目中。我让webpack运行正常。

我的目标是将新编译的javascript加载到我的项目模板/ base.html中。

这是我项目的setting.py文件的静态部分。

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

这是我的webpack配置：

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;

从我的web pack.config可以看出，我在根目录文件夹的Public / assets中创建了一个app.js文件。

如何将我的public / assets文件夹添加到我的静态文件中，以便在项目的文件夹templates / base.html中添加以下脚本？

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

这是文件夹图：

将不胜感激。

Answer 1

static模板标记允许您链接到STATIC_ROOT中保存的文件。

所以，如果你有

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

并且您的app.js文件已保存在/path/to/my/project/static/public/assets/app.js中，则以下内容应链接到您的文件

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

在Django项目之外加载javascript文件

1 个答案: