はWebPACKの私が画像をロードしようとしている背景画像

Question

をロードしない：私のstyle.scssで

background: transparent url("../img/select-icon.png") no-repeat center right 8px; 

をし、それがここ

が動作していない私のwebpack.configです：

function _path(p) { 
    return path.join(__dirname, p); 
} 

module.exports = { 

    context: __dirname, 
    entry: [ 
     './assets/js/index' 
    ], 

    output: { 
     path: path.resolve('./assets/bundles/'), 
     filename: '[name].js' 
    }, 

    devtool: 'inline-eval-cheap-source-map', 

    plugins: [ 
     new BundleTracker({filename: './webpack-stats.json'}), 
     new webpack.ProvidePlugin({ 
      $: 'jquery', 
      jQuery: 'jquery', 
      'window.jQuery': 'jquery' 
     }), 
     new HappyPack({ 
      id: 'jsx', 
      threads: 4, 
      loaders: ["babel-loader"] 
     }) 

    ], 

    module: { 
     loaders: [ 
      { 
       test: /\.css$/, 
       include: path.resolve(__dirname, './assets/css/'), 
       loader: "style-loader!css-loader" 
      }, 

      { 
       test: /\.scss$/, 
       include: path.resolve(__dirname, './assets/css/'), 
       loader: "style-loader!css-loader!sass-loader" 
      }, 

      { 
       test: /\.jsx?$/, 
       include: path.resolve(__dirname, './assets/js/'), 
       exclude: /node_modules/, 
       loaders: ["happypack/loader?id=jsx"] 
      }, 
      { 
       test: /\.png$/, 
       loader: 'file-loader' 
      } 
     ] 
    }, 

    resolve: { 
     modulesDirectories: ['node_modules'], 
     extensions: ['', '.js', '.jsx'], 
     alias: { 
      'inputmask' : _path('node_modules/jquery-mask-plugin/dist/jquery.mask'), 
     }, 
    } 
} 

ファイルローダーを使用していますが、ブラウザで表示されたURLと画像のURLが一致しません。

私はソースマップを使用していないことを考える：https://github.com/webpack/style-loader/issues/55

誰が助けることはできますか？

Answer 1

ファイル出力パスにURL（ '...'）を解決するには、css-loaderの前にresolve-url-loaderを使用する必要があります。で

ごwebpack.config.js次の変更を行う必要があります。

//... 
module: { 
    loaders: [ 
     { 
      test: /\.css$/, 
      include: path.resolve(__dirname, './assets/css/'), 
      loader: "style-loader!css-loader!resolve-url-loader" 
     }, 

     { 
      test: /\.scss$/, 
      include: path.resolve(__dirname, './assets/css/'), 
      loader: "style-loader!css-loader!resolve-url-loader!sass-loader" 
     }, 
     //... 
    ] 
} 
//... 

---

はオプション設定として、ファイル名テンプレートfile-loader用途を指定することができます。たとえば、96ab4c4434475d0d‌​23b82bcfc87be595.pngの代わりに/img/select-icon.pngを使用できます。

webpack.config.jsには、file-loaderのデフォルトオプションが使用されています。これは、出力ファイル名がテンプレート[id].[ext]を使用していることを意味します。 [id]はチャンクID、[ext]はファイルの拡張子です。

出力ファイル名テンプレートを指定するには、nameパラメータをローダのクエリに渡す必要があります。

これまでにrequire('../img/select-icon.png')は'/img/select-icon.png'を返す必要があります。 resolve-url-loaderはこの値を使用します。

//... 
module: { 
    loaders: [ 
     //... 
     { 
      test: /\.png$/, 
      loader: 'file-loader', 
      query: { 
       name: 'img/[name].[ext]' 
      } 
     }, 
     //... 
    ] 
} 
//... 

Answer 2

私はAngular Classスターターパックを使用していますので、「ヘルパー」クラスがあるかどうかわかりません。

webpack内congif/commonはヘルパー定数を追加します。あなたの決意内

const helpers = require('./helpers'); 

：

root: helpers.root('src'), 

とローダー内の追加は、追加：

{ 
    test: /\.html$/, 
    loader: 'raw-loader', 
    exclude: [helpers.root('src/index.html')] 
    }, 

今、この

{ 
    test: /\.scss$/, 
    exclude: /node_modules/, 
    loaders: ['raw-loader', 'sass-loader'] 
    }, 

にSCSSローダを変更するには、今わからないイムあなたがまだ "include.path"を使うことができるなら、私はj url（ './assets/img/whatever.png'）のように、Url内に「assets」を追加する必要があります。

希望と幸運を願っています。