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

【问题标题】：Setting the output folder and file url separately; Webpack file-loader with Django分别设置输出文件夹和文件url；使用 Django 的 Webpack 文件加载器
【发布时间】：2016-04-24 06:18:43
【问题描述】：

我正在使用 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 限制的文件会被移交给文件加载器（根据我的阅读）。

【问题讨论】：

标签： javascript django url webpack

【解决方案1】：

现在有同样的问题。似乎file-loader 会在不同位置输出文件，具体取决于您在编译时使用的是webpack-dev-server 还是webpack。

【讨论】：

【解决方案2】：

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

【讨论】：