2015-12-18 12 views
8

は、私は次のエラーを得ました相対パスを使用して背景画像を読み込みます。のWebPACK:私がしようとすると、この問題がのみ発生していること</p> <blockquote> <p>Module not found: Error:Cannot resolve module 'file-loader'</p> </blockquote> <p>ノート:私はWebPACKのと<strong><em>SASS</em></strong>ファイルを構築しようとした際、モジュールのファイル・ローダー」を解決することはできません

この作品罰金:これは問題を引き起こす

background:url(http://localhost:8080/images/magnifier.png); 

background:url(../images/magnifier.png); 

と、これは私のプロジェクト構造

  • 画像
  • スタイル
  • WebPACKのです。 config.jsの

と、これは私のWebPACKのファイルです:@silvenonは彼のコメントで述べたよう

var path = require('path'); 
module.exports = { 
    entry: { 
     build: [ 
      './scripts/app.jsx', 
      'webpack-dev-server/client?http://localhost:8080', 
      'webpack/hot/only-dev-server' 
     ] 
    }, 
    output: { 
     path: path.join(__dirname, 'public'), 
     publicPath: 'http://localhost:8080/', 
     filename: 'public/[name].js' 
    }, 
    module: { 
     loaders: [ 
      {test: /\.jsx?$/, loaders: ['react-hot', 'babel?stage=0'], exclude: /node_modules/}, 
      {test: /\.scss$/, loaders: ['style', 'css', 'sass']}, 
      {test: /\.(png|jpg)$/, loader: 'file-loader'}, 
      {test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, loader: 'file-loader'} 
     ] 
    }, 
    resolve: { 
     extensions: ['', '.js', '.jsx', '.scss', '.eot', '.ttf', '.svg', '.woff'], 
     modulesDirectories: ['node_modules', 'scripts', 'images', 'fonts'] 
    } 
}; 
+0

css-loaderはすべての 'url(...)'を 'require(...) 'に変換するので、' ../ images/magnifier.png'は '/\.(png|jpg) )$/'テスト。ファイルローダーがインストールされていますか? – silvenon

+0

@silvenon、あなたのお返事ありがとうございます***ファイルローダー***が壊れてしまったので、私はそれを再インストールし、すべてうまくいくでしょう。ありがとう – Moussawi7

答えて

14

Do you have file-loader installed?

はいファイル・ローダーがインストールされているが壊れていました私の問題はそれを再インストールすることで解決されました。

npm install --save-dev file-loader

+6

['url-loader'](https: /github.com/webpack-contrib/url-loader):それには['file-loader'](https://github.com/webpack-contrib/file-loader)もインストールする必要がありますので、' npm install --save-devファイルローダ 'を実行します。 – totymedli

+0

webpackにファイルをロードさせたくない場合はどうすればいいですか?イメージが実際にdistフォルダに存在するかどうかを確認するためにwebpackは必要ありません。 – Kokodoko

2

私は正確に同じ問題を持っており、それを修正以下のとおりです。このため

loader: require.resolve("file-loader") + "?name=../[path][name].[ext]" 
+0

これは非常に役に立つと思われますが、他のローダー設定でwebpack.configにマップするのが難しいです。おそらくより完全な例を提供できますか?このような意味ですか? '{テスト:/ \。?name = ../[path] [name]。[ext] "} ' 'ファイル名を指定してください。 – XML

1

感謝を - これは ブートストラップ、d3js、jqueryの、base64でインライン画像を取得するために、最終的な作品だったと自分のひどく書かれたJSはwebpackで遊ぶべきです。コンパイルブートストラップフォントが

{ 
test: /glyphicons-halflings-regular\.(woff2|woff|svg|ttf|eot)$/, 
loader:require.resolve("url-loader") + "?name=../[path][name].[ext]" 
} 

おかげだったときにモジュールを解決できません「URL」 :エラー:

は、上記の質問とは見られない問題
モジュール歩き回るの解決に答えるために!

関連する問題

 関連する問題