无法解析捆绑样式

Question

我正在尝试将Webpack集成到我的Django项目中.

这是我的webpack.config.js文件:

const path = require("path");
const webpack = require('webpack');
const BundleTracker = require('webpack-bundle-tracker');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

const VENDOR_LIBS = [
    'jquery', 'mustache'
];

const config = {
    context: __dirname,
    entry:  {
        app: 'app.js',
        vendor: VENDOR_LIBS,
    },
    output: {
        path: path.resolve(__dirname, './static/bundles/'),
        filename: "[name].js"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['env']
                    }
                }
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: { limit: 40000 }
                    },
                    'image-webpack-loader'
                ]
            }
        ]
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            names: ['vendor', 'manifest']
        }),
        new BundleTracker({filename: './webpack-stats.json'}),
        new ExtractTextPlugin('style.css')
    ],
    resolve: {
        modules: ['./static/assets/', './static/assets/javascript/', './static/assets/css/', 'node_modules']
    }
};

module.exports = config;

我也在使用django-webpack-loader,我在settings.py文件中有以下设置:

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

STATIC_URL = '/static/'

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

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

WEBPACK_LOADER = {
    'DEFAULT': {
        'BUNDLE_DIR_NAME': 'bundles/',
        'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
        # 'CACHE': not DEBUG
    }
}

出于某种原因,我在/"无法解析包样式"时遇到WebpackBundleLookupError

{% load render_bundle from webpack_loader %}
{% render_bundle 'manifest' %}
{% render_bundle 'vendor' %}
{% render_bundle 'app' 'js' %}
{% render_bundle 'style' 'css' %}

加载javascript工作正常,但是当我试图加载我的css捆绑文件时,我得到了那个错误.

问候,

安东尼

Answer 1

我不熟悉render_bundle这里的工作模式，自从我使用 django 以来已经很多年了，但看起来其他三个render_bundle语句正在引用您的 webpack 配置已定义的块。manifestandvendor将由 and 输出，CommonsChunkPlugin并且app是您的条目块。然而，该配置中似乎没有创建一个名为 的块style。您是否想捕获 的输出ExtractTextPlugin？该插件将.css文件写入磁盘而不是创建 webpack 块，因此您通常会在 HTML 中引用该 CSS 文件。