分别设置输出文件夹和文件 url;带有 Django 的 Webpack 文件加载器

Setting the output folder and file url separately; Webpack file-loader with Django

本文关键字：文件 Django 带有 Webpack 加载 url 设置 输出 文件夹      更新时间：2023-09-26

我正在使用 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 加载器处理图像，但超过 8k 限制的文件会交给文件加载器（从我读到的内容来看）。

您需要

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

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

相关文章：