web-dev-qa-db-ja.com

Webpack：モジュール 'file-loader'を解決できません

[〜＃〜] sass [〜＃〜]ファイルをwebpackでビルドしようとすると、次のエラーが発生しました。 ：

モジュールが見つかりません：エラー：モジュール 'file-loader'を解決できません

この問題は、相対パスを使用して背景画像を読み込もうとしたときにのみ発生することに注意してください。

この作品はうまく：

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

これが問題の原因です。

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

これが私のプロジェクト構造です

  • 画像
  • スタイル
  • webpack.config.js

これは私のwebpackファイルです：

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']
    }
};
sasswebpack
26
Moussawi7

@silvenonが彼のコメントで言ったように：

ファイルローダーがインストールされていますか？

はいfile-loaderはインストールされましたが、破損しており、再インストールすることで問題が解決しました。

npm install --save-dev file-loader

43
Moussawi7

私はまったく同じ問題を抱えており、次の問題を修正しました。

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

これに感謝します-これは、Bootstrap、d3js、Jquery、base64インラインイメージ、およびWebpackで遊ぶために私自身のひどく書かれたJSを取得する最後のピースでした。

上記の質問と問題を回避するための解決策に答えるために
モジュールが見つかりません：エラー：モジュール 'url'を解決できませんコンパイル時bootstrap fonts was

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

ありがとう！

1
Ben White