Webpack, extrahieren Text-Plugin und relative Pfade der Ressourcen von Bildern und Schriften

Question

In Webpack muss ich gebündelte CSS-Dateien in einen anderen Ordner als meine JS-Dateien extrahieren und das gleiche gilt für Bilder und Schriftarten. Ergebnis sollte sein:

build/ 
    js/ 
     bundle.js 
    styles/ 
     css/ 
      bundle.css 
     fonts/ 
      ... 
    images/ 
     ... 

Ich habe versucht, viele Kombinationen von webpack Config, aber ich konnte es nicht diese Dateistruktur zu erzeugen und in der gleichen Zeit korrekte relative URLs in den CSS-Dateien generieren.

endete ich mit dieser Config-up:

var ExtractTextPlugin = require('extract-text-webpack-plugin'); 

var appCssExtractPlugin = new ExtractTextPlugin('styles/css/styles.css'); 

module.exports = { 
    entry: { 
     app: __dirname + '/src/client/app/bootstrap.js', 
    }, 
    output: { 
     path: __dirname + '/build', 
     publicPath: '', 
     filename: 'js/bundle.js' 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       exclude: /(node_modules|bower_components|sc\.js$)/, 
       loaders: ['ng-annotate', 'babel?presets[]=es2015'] 
      }, 
      { 
       test: /\.scss$/, 
       exclude: /(node_modules|bower_components)/, 
       loader: appCssExtractPlugin.extract([], ['css', 'resolve-url', 'sass']) 
      }, 
      { 
       test: /\.html$/, 
       loader: 'html' 
      }, 
      { 
       test: /\.(jpg|jpeg|gif|png)$/, 
       loader: 'url?limit=10000&name=[name].[ext]?[hash]' 
      }, 
      { 
       test: /\.(woff|woff2|svg|ttf|eot|otf)$/, 
       loader: 'file?name=[name].[ext]?[hash]' 
      } 
     ] 
    }, 
    plugins: [ 
     appCssExtractPlugin, 
    ] 
}; 

Das funktioniert nicht - die Ausgabedatei Struktur ist richtig, aber in bundle.css die URLs auf die Bilder und Schriften sind falsch und nicht in Bezug auf die CSS Datei:

url(styles/fonts/abc.woff) 
url(images/abc.gif) 

Kann jemand mir helfen, die korrekte Konfiguration zu gründen? Ich habe keine Ideen für Kombinationen von Pfad, publicPath, extrahieren Plugin Pfad, URL/Datei loader Dateiname ...

Answer 1

Ihr öffentlicher Pfad sollte / statt einer leeren Zeichenfolge sein.

Sie müssen sourceMap in Ihrem Sass Loader sass?sourceMap aktivieren. Siehe https://github.com/bholloway/resolve-url-loader#source-maps-required