Separate Schriftarten und css webpack mit

Question

Was ich versuche zu erreichen ist .Weniger in CSS-Dateien mit Schriften zu extrahieren und jeweils in separaten Verzeichnissen zu setzen wie so:

web/ 
    assets/ 
     css/ 
     - style.css 
     fonts/ 
     - glyphicons-halflings-regular.eot 
     js/ 
     - style.js 

Aber der Punkt ist, dass die CSS-Datei zeigt das Schriftarten-Verzeichnis auf derselben Ebene an.

style.css

...src:url(./fonts/glyphicons-halflings-regular.eot)... 

webpack.config.js

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); 

lib/parts.js

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') 
     ] 
    }; 
}; 

Alle wou Hilfe Ich würde mich freuen.

Answer 1

So konnte ich mein Problem mit dem Optionsparameter in ExtractTextPlugin.extract lösen:

lib/parts.js

exports.extractStyles = function(paths) { 
    return { 
     module: { 
      loaders: [ 
       { 
        test: /\.(woff|woff2|eot|ttf|svg)$/, 
        loader: 'file-loader', 
        query: { 
         name: '../fonts/glyphicons-halflings-regular.[ext]' 
        } 
       }, 
       { 
        test: /\.less$/, 
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader!less-loader', {publicPath: '../'}), 
        include: paths 
       }, 
       { 
        test: /\.(woff|woff2|eot|ttf|svg)$/, 
        loader: 'file-loader', 
        query: { 
         name: './fonts/glyphicons-halflings-regular.[ext]' 
        } 
       } 
      ] 
     }, 
     plugins: [ 
      new ExtractTextPlugin('./css/[name].[chunkhash].css') 
     ] 
    }; 
};