Webpack, estrai il plug-in di testo e i relativi percorsi di risorse di immagini e font

Question

Nel webpack ho bisogno di estrarre i file CSS in bundle in una cartella diversa dai miei file JS e la stessa cosa vale per immagini e font. Risultato dovrebbe essere:

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

Ho provato molte combinazioni di webpack config ma non ho potuto farlo per generare questa struttura di file e nello stesso tempo generare corretti URL relativi nei file CSS.

Ho finito con questa configurazione:

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, 
    ] 
}; 

questo non funziona - la struttura del file di output è corretto, ma in bundle.css gli URL alle immagini e font sono sbagliate e non relativamente al CSS file:

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

Qualcuno può aiutarmi a configurare la configurazione corretta? Sono a corto di idee per combinazioni di percorso, publicPath, estrai percorso plugin, url/file loader nome file ...

Answer 1

Il percorso pubblico deve essere / anziché una stringa vuota.

Devi abilitare sourceMap nel tuo caricatore sass sass?sourceMap. Vedi https://github.com/bholloway/resolve-url-loader#source-maps-required