Skip to content
This repository was archived by the owner on Mar 17, 2021. It is now read-only.
This repository was archived by the owner on Mar 17, 2021. It is now read-only.

Output files to a different dir #32

Closed
Closed
Output files to a different dir#32
@guocheng

Description

@guocheng
guocheng
opened on Jul 31, 2015

Hello,

I am building an web app using bootstrap. I had this line to include the .css file

var Bootstrap  = require('../../node_modules/bootstrap/dist/css/bootstrap.min.css');

I would like to output the corresponding font files that bootstrap.min.css relies on to /dist/css/

Here is a simplified version of my webpack.config.js:

module.exports = {
    entry: {
        app: path.resolve(__dirname, 'app/src/index.js'),
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '../js/[name].js'
    },
    module: {
        loaders:[{
            test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
            loader: 'file-loader'
        }]

How can I config file-loader to output the font files to /dist/css instead of /dist/?

Thank you!

Activity

hkongm

hkongm commented on Aug 19, 2015

@hkongm
hkongm
on Aug 19, 2015

same question.

hkongm
mentioned this on Aug 19, 2015
ghost

ghost commented on Aug 20, 2015

@ghost
ghost
on Aug 20, 2015

it is not a bug, you can add a query parameter name=xxx like this

    {
                test: /\.(png|jpg)$/,
                loader: 'url-loader?limit=100000&name=./imgs/[hash].[ext]'
    }

see loader-utils source code

vjancik
mentioned this on May 19, 2016
ghost

ghost commented on Sep 29, 2016

@ghost
ghost
on Sep 29, 2016

If you want for example emit your files at fonts/some-font.ttf
loader: "file?name=./fonts/[hash].[ext]"
But you are already extracting your css into css/styles.css
new ExtractTextPlugin('css/app.css', { allChunks: true })

Your css files will try load the fonts from css/fonts/...
Because they expect to be in the root of the public folder.

You can fix this by giving the publicPath query to the file-loader

loader: "file?publicPath=../&name=./fonts/[hash].[ext]"

This will emit the files in fonts/* and but the publicPath will be .././fonts/** in your css file..

Maybe it helps some one..

lpil

lpil commented on Oct 3, 2016

@lpil
lpil
on Oct 3, 2016

Thanks for the tip! It would be great if this option was documented in the README.

SpaceK33z

SpaceK33z commented on Oct 9, 2016

@SpaceK33z
SpaceK33z
on Oct 9, 2016
Contributor

Closing since the question has been answered. Feel free to add this to the readme with a PR.

SpaceK33z
closed this as completedon Oct 9, 2016
davevans

davevans commented on Oct 19, 2016

@davevans
davevans
on Oct 19, 2016

ps: the param to the file-loader is publicPath - beware cut and paste of pubicPath from above

netojose

netojose commented on Oct 23, 2016

@netojose
netojose
on Oct 23, 2016

@dropfen , publicPath QueryString, best tip ever. Thanks!

tomwang1013

tomwang1013 commented on Jan 26, 2017

@tomwang1013
tomwang1013
on Jan 26, 2017

we can also set the publicPath to an absolute path, so the assets can be accessed by all css

jimmerioles

jimmerioles commented on Oct 20, 2017

@jimmerioles
jimmerioles
on Oct 20, 2017 · edited by jimmerioles

that sneaky publicPath=../ 😄

karlvr
mentioned this on Mar 30, 2019
marioecg
mentioned this on Aug 21, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @netojose@SpaceK33z@hkongm@tomwang1013@davevans

        Issue actions
          Output files to a different dir · Issue #32 · webpack-contrib/file-loader