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

admin管理员组

文章数量:1384098

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 /mon/static/[file], but when the url strings are replaced in the stylesheets, they need to point at /static/[file]. Since Django doesn't expose /mon/ as part of the path, the img urls end up pointing to a non-existent location ( http://host/mon/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=mon/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=mon/static/[name]-[hash].[ext]'
        },{
            test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
            loader: 'file-loader?name=mon/static/[name]-[hash].[ext]'
        }]
    }
};

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 /mon/static/[file], but when the url strings are replaced in the stylesheets, they need to point at /static/[file]. Since Django doesn't expose /mon/ as part of the path, the img urls end up pointing to a non-existent location ( http://host/mon/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=mon/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=mon/static/[name]-[hash].[ext]'
        },{
            test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
            loader: 'file-loader?name=mon/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).

• javascript
• django
• url
• webpack

Share Improve this question Follow asked Jan 18, 2016 at 22:51 relicrelic 1,71411 gold badge1616 silver badges2626 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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.

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 piling.

本文标签： javascriptSetting the output folder and file url separately Webpack fileloader with DjangoStack Overflow