python - 无法解析捆绑样式

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 配置定义的 block 。 manifest 和 vendor 将由 CommonsChunkPlugin 输出，而 app 是您的入口 block 。但是，该配置中的任何内容似乎都没有创建名为 style 的 block 。您是否正在 try catch ExtractTextPlugin 的输出？该插件将 .css 文件写入磁盘而不是创建 webpack block ，因此您通常会在 HTML 中引用该 CSS 文件。