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配置中的块已经定义。 manifest将输出vendor和CommonsChunkPlugin，而app是您的输入块。但是，该配置似乎没有创建名为style的块。您是否要捕获ExtractTextPlugin的输出？该插件会将.css文件写入磁盘，而不是创建Webpack块，因此您通常会在HTML中引用该CSS文件。

无法解析捆绑样式

1 个答案: