Webpack、テキストプラグインとイメージとフォントのリソースの相対パスを抽出します

Question

webpackでは、バンドルされたCSSファイルをJSファイルとは別のフォルダに展開する必要があり、イメージとフォントにも同じことが適用されます。結果は次のようになります。

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

私はWebPACKのコンフィグレーションの多くの組み合わせを試してみましたが、私はそれがこのファイル構造を生成するために取得し、同じ時間にCSSファイル内の正しい相対URLを生成することができませんでした。

私はこの設定になってしまった：

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

これは動作しません - 出力ファイル構造は正しいですが、中にbundle.css画像やフォントのURLがCSSに比べて間違っているといませんファイル：

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

誰でも設定を正しく設定できますか？私はパス、パブリックパス、プラグインのパス、URL /ファイルローダーのファイル名を抽出するためのアイディアが不足しています...

Answer 1

パブリックパスは空の文字列ではなく/でなければなりません。

あなたのSassローダーでsourceMapを有効にする必要がありますsass?sourceMap。 https://github.com/bholloway/resolve-url-loader#source-maps-required