分别设置输出文件夹和文件url；使用 Django 的 Webpack 文件加载器

Question

我使用 Webpack 创建多个包，这些包加载到各自的 Django 应用程序中。所有前端（静态）资源都存储在 Django 框架外部的单独文件夹中，并且当 Webpack 运行时，每个包都会放入相应的静态子文件夹中。

我遇到的问题是使用文件加载器捆绑图像时。这些图像的导出位置应该是/common/static/[file]，但是当样式表中替换 url 字符串时，它们需要指向/static/[file]。由于 Django 不会/common/作为路径的一部分公开，因此 img url 最终会指向一个不存在的位置（http://host/common/static/...而不是http://host/static/...）。

我以为我已经通过文件加载器（LINK）提供的“上下文”值找到了所需的答案，但我要么错误地理解了“上下文”的目的，要么错误地使用了它。

这是我的一些配置文件。我删除了一些不相关的部分，例如plugins、externals和resolve。

module.exports = {
    context: __dirname,
    entry: {
        './agent/static/agent_bundle': './ui/agent/entry.js',
    },
    output: {
        path: './',
        filename: '[name].js'
    },
    module: {
        loaders: [{
            test: /\.js(x)?$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            query: {
                presets: ['es2015']
            }
        },{
            test: /\.(png|jpg)$/,
            loader: 'url-loader?limit=8192&name=common/static/[name]-[hash].[ext]&context=static',
        },{
            test: /\.less$/,
            loader: 'style!css?sourceMap!less?sourceMap'
        },{
            test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
            loader: 'url-loader?limit=10000&minetype=application/font-woff&name=common/static/[name]-[hash].[ext]'
        },{
            test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
            loader: 'file-loader?name=common/static/[name]-[hash].[ext]'
        }]
    }
};

我实际上是通过 url-loader 处理图像，但是超过 8k 限制的文件将被传递给文件加载器（根据我的阅读）。

Answer 1

您需要设置该output.publicPath选项。我认为https://webpack.github.io/docs/configuration.html#output-publicpath中的示例可以满足您的需要。