は、私は次のエラーを得ました相対パスを使用して背景画像を読み込みます。の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']
}
};
css-loaderはすべての 'url(...)'を 'require(...) 'に変換するので、' ../ images/magnifier.png'は '/\.(png|jpg) )$/'テスト。ファイルローダーがインストールされていますか? – silvenon
@silvenon、あなたのお返事ありがとうございます***ファイルローダー***が壊れてしまったので、私はそれを再インストールし、すべてうまくいくでしょう。ありがとう – Moussawi7