Output files to a different dir

[guocheng]

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!

[hkongm]

same question.

[ghost]

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

[ghost]

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]

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

[SpaceK33z]

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

[davevans]

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

[netojose]

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

[tomwang1013]

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

[jimmerioles]

that sneaky publicPath=../ 😄