无法解析捆绑样式答案

【问题标题】：Cannot resolve bundle style无法解析捆绑样式
【发布时间】：2018-08-13 21:26:24
【问题描述】：

我正在尝试将 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 捆绑文件时，我得到了那个错误。

问候，

安东尼

【问题讨论】：

嘿@Anthony 你有没有得到这个工作？我现在也有同样的问题。

标签： python django webpack

【解决方案1】：

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

【讨论】：