Q:

webpack 1 file-loader relative file path

I need to output the js, images, fonts, css to different directories. Webpack is configured accordingly and placing the files in the correct directories in the distribution directory:
/dist
/dist/images
/dist/css
/dist/js
/dist/fonts

I also had to extract the css file and for that reason, I notice that the file-loader option that is used to place the fonts and images into the right directory does not generated the correct url, so then the files fail to load in the web browser.
http://foobar.com/assets/css/main.css
http://foobar.com/assets/css/assets/images/foobar.png

When expected,
http://foobar.com/assets/images/foobar.png

The webpack config file follows:
var path = require("path");
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var config = require('./config');
var CompressionPlugin = require("compression-webpack-plugin");
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: [
        './src/js/index.js'
    ],
    output: {
        path: __dirname + '/dist',
        filename: 'assets/js/bundle-[hash].js'
    },
    module: {
        loaders: [
            { test: /\.js$/, exclude: /node_modules/, loaders: ['babel-loader'] },
            { test: /\.scss$/, loader: ExtractTextPlugin.extract('style','css!sass') },
            { test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, loader: 'file-loader?name=[name].[ext]&publicPath=assets&outputPath=fonts' },
            { test: /\.(jpg|png|gif|svg)$/i, loader: 'file-loader?name=[name].[ext]&publicPath=assets&outputPath=images/'}
        ]
    },
    plugins: [
        new ExtractTextPlugin("assets/css/[name].css"),
        new HtmlWebpackPlugin({
            inject: true,
            template: __dirname + '/src/' + 'index.html',
            filename: 'index.html'
        }),
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify('production'),
                'PORT_NODE_SERVER': config.port.node_server_prod_port
            }
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: true
            }
        }),
        new webpack.optimize.AggressiveMergingPlugin(),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.UglifyJsPlugin({
            mangle: true,
            compress: {
                warnings: false, // Suppress uglification warnings
                pure_getters: true,
                unsafe: true,
                unsafe_comps: true,
                screw_ie8: true
            },
            output: {
                comments: false,
            },
            exclude: [/\.min\.js$/gi] // skip pre-minified libs
        }),
        new CompressionPlugin({
            asset: "[path].gz[query]",
            algorithm: "gzip",
            test: /\.js$|\.css$|\.html$/,
            threshold: 10240,
            minRatio: 0.8
        })
    ]
};

A:

I found a solution. It seems that webpack v1 needs a hint about the base path to be able to solve this, for that reason the full base path is required, has follow:
var path = require("path");
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var config = require('./config');
var CompressionPlugin = require("compression-webpack-plugin");
var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
    entry: [
        './src/js/index.js'
    ],
    output: {
        path: __dirname + '/dist',
        filename: 'js/bundle-[hash].js',
        publicPath: '/myapp/assets'
    },
    module: {
        loaders: [
            { test: /\.js$/, exclude: /node_modules/, loaders: ['babel-loader'] },
            { test: /\.scss$/, loader: ExtractTextPlugin.extract('style','css!sass') },
            { test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, loader: 'file-loader?name=/fonts/[name].[ext]' },
            { test: /\.(jpg|png|gif|svg)$/i, loader: 'file-loader?name=/images/[name].[ext]'}
        ]
    },
    plugins: [
        new ExtractTextPlugin("css/[name]-[hash].min.css"),
        new HtmlWebpackPlugin({
            inject: true,
            template: __dirname + '/src/' + 'index.html',
            filename: 'index.html'
        }),
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify('production'),
                'PORT_NODE_SERVER': config.port.node_server_prod_port
            }
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: true
            }
        }),
        new webpack.optimize.AggressiveMergingPlugin(),
        new webpack.optimize.OccurrenceOrderPlugin(),
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.UglifyJsPlugin({
            mangle: true,
            compress: {
                warnings: false, // Suppress uglification warnings
                pure_getters: true,
                unsafe: true,
                unsafe_comps: true,
                screw_ie8: true
            },
            output: {
                comments: false,
            },
            exclude: [/\.min\.js$/gi] // skip pre-minified libs
        }),
        new CompressionPlugin({
            asset: "[path].gz[query]",
            algorithm: "gzip",
            test: /\.js$|\.css$|\.html$/,
            threshold: 10240,
            minRatio: 0.8
        })
    ]
};

About the /myapp has in http://foobar.com/myapp and then http://foobar.com/myapp/assets/js/bundle-438348934.js and so http://foobar.com/myapp/assets/fonts/myfont.woff
Hope this helps!

