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) 

任何人都可以幫助我設置正確的配置？我用完路徑，publicPath，提取插件路徑，url /文件加載器文件名的組合的想法...

Answer 1

您的公共路徑應該是/而不是空字符串。

您必須在sass loader的sass?sourceMap中啓用sourceMap。請參閱https://github.com/bholloway/resolve-url-loader#source-maps-required