title: Separate fonts and css using webpack
body: <p>What I'm trying to achieve is to extract .less into .css files with fonts and to put each in separate directories like so:</p>
  
  <pre><code>web/
     assets/
        css/
           - style.css
        fonts/
           - glyphicons-halflings-regular.eot
        js/
           - style.js
  </code></pre>
  
  <p>But the point is that the css file indicates the fonts directory on the same level.</p>
  
  <p><strong>style.css</strong></p>
  
  <pre><code>...src:url(./fonts/glyphicons-halflings-regular.eot)...
  </code></pre>
  
  <p><strong>webpack.config.js</strong></p>
  
  <pre><code>const path = require("path");
  
  const webpack = require("webpack");
  
  const merge = require('webpack-merge');
  const validate = require('webpack-validator');
  
  const parts = require('./lib/parts');
  
  const PATHS = {
      style: path.join(__dirname, 'sources', 'less'),
      build: path.join(__dirname, '..', 'web/assets')
  };
  
  const common = {
      entry: {
          style: PATHS.style
      },
      output: {
          path: PATHS.build,
          filename: './js/[name].[chunkhash].js',
          chunkFilename: '[chunkhash].js',
          publicPath: 'assets/'
      }
  };
  
  var config;
  
  switch (process.env.npm_lifecycle_event) {
      case 'build':
          config = merge(
              common,
              parts.extractStyles(PATHS.style)
          );
          break;
  }
  
  module.exports = validate(config);
  </code></pre>
  
  <p><strong>lib/parts.js</strong></p>
  
  <pre><code>const webpack = require('webpack');
  const ExtractTextPlugin = require('extract-text-webpack-plugin');
  
  exports.extractStyles = function(paths) {
      return {
          module: {
              loaders: [
                  {
                      test: /\.less$/,
                      loader: ExtractTextPlugin.extract('style-loader', 'css-loader!less-loader'),
                      include: paths
                  },
                  {
                      test: /\.(png|woff|woff2|eot|ttf|svg)$/,
                      loader: 'url-loader',
                      query: {
                          limit: 10000,
                          name: './fonts/glyphicons-halflings-regular.[ext]'
                      }
                  }
              ]
          },
          plugins: [
              new ExtractTextPlugin('./css/[name].[chunkhash].css')
          ]
      };
  };
  </code></pre>
  
  <p>Any help would be apreciated.</p>