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

Question

I'm using Webpack to create several bundles that are loaded within their respective Django applications. All the front-end (static) assets are stored in a separate folder outside of the Django framework, and each bundle gets dropped into the appropriate static subfolder when Webpack is run.

The problem I'm having is when bundling images using the file-loader. The export location for these images should be /common/static/[file], but when the url strings are replaced in the stylesheets, they need to point at /static/[file]. Since Django doesn't expose /common/ as part of the path, the img urls end up pointing to a non-existent location ( http://host/common/static/... instead of http://host/static/...).

I thought I had found the answer I needed with the "context" value provided by the file-loader (LINK) but I'm either understanding the purpose of "context" incorrectly, or using it incorrectly.

Here's some of my config file. I've trimmed some of the irrelevant bits such as plugins, externals and 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]'
        }]
    }
};

I'm actually processing images via url-loader, but files that are over the 8k limit are handed off to the file-loader (from what I've read).

Martin Grandrath · Accepted Answer · 2016-02-15 13:25:16Z

4

You need to set the output.publicPath option. I think the example at https://webpack.github.io/docs/configuration.html#output-publicpath does what you need.

answered Feb 15, 2016 at 13:25

Martin Grandrath

615 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Filip Dupanović · Accepted Answer · 2016-07-26 16:43:48Z

0

Having the same issue right now. Seems that file-loader outputs files in different locations, depending on whether you're using webpack-dev-server or webpack when compiling.

answered Jul 26, 2016 at 16:43

Filip Dupanović

33.8k14 gold badges89 silver badges119 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related