Webpackファイルローダー重複したパブリックパス

Question

私はurl-loaderとfile-loaderを使って自分のsassファイルをパッケージ化していますが、画像URLに問題があります。

は私が私が私のSASSファイルでurl(~images/myimage.png)を使用できるアプリケーションのルートに私のimagesディレクトリをエイリアスするresolve.aliasを使用して試してみた - これはurl-loaderで正常に動作しますが、画像がfile-loaderによってピックアップされている場合、彼らが出力されます重複した公共パス（dist/dist/[hash].png）を使用している場合は、~か相対パスのどちらを使用するかが異なります。画像への絶対パスを使用すると動作しますが、アプリケーションがサブディレクトリの下にマウントされている場合は動作しなくなります。

ディレクトリ構造：

- images/ 
- js/ 
- styles/ 
- webpack.config.js 

WebPACKの設定：

module.exports = { 
    entry: { 
     app: './js/bootstrap' 
    }, 

    output: { 
     filename: 'bundle.js', 
     path: 'dist', 
     publicPath: 'dist/' 
    }, 

    module: { 
     loaders: [ 
      { 
       test: /\.scss$/, 
       loader: ExtractPlugin.extract('style', 'css!sass') 
      }, 
      { 
       test: /\.(gif|png|svg|jpe?g)$/i, 
       loader: 'url', 
       query: { 
        limit: 1000 
       } 
      } 
     ] 
    }, 

    resolve: { 
     // add alias for application code directory 
     alias:{ 
      js: path.resolve(__dirname, 'js'), 
      styles: path.resolve(__dirname, 'styles'), 
      images: path.resolve(__dirname, 'images') 
     }, 
     extensions: ['', '.js', '.scss', '.png', '.svg', '.jpg', '.jpeg', '.gif'] 
    } 
}; 

サスファイル：

.some-class{ 
    background: url('~images/myimage.png') // url-loader works, file-loader doesn't 
    background: url('../../../images/myimage.png') // url-loader works, file-loader doesn't 
    background: url('/images/myimage.png') // both loaders work until app mounted under a sub-directory 
} 

がうまくいけば、私は愚かな何かが欠けています！

Answer 1

私はExtractPluginでpublicPathをオーバーライドし、修正を見つけ、それをやったことだった。/始まる

ExtractPlugin.extract('style', 'css!sass', { publicPath: './' })

Answer 2

使用publicPath、すなわち/dist/の代わりdist/。

それ以外の場合、アセットへのパスは相対的なものとして解釈され、1つのSassドキュメント、たとえばdist/daddy.scssは、 dist/child.scssの場合、子へのパスはダディのURL "folder"（これはdist）からの相対パスとして解釈されるため、ブラウザはdist/dist/child.scssを探します。