web-dev-qa-db-fra.com

Webpack: impossible de résoudre le module «chargeur de fichiers»

Lorsque j'essaye de construire [~ # ~] sass [~ # ~] fichier avec webpack, j'ai eu l'erreur suivante :

Module introuvable: Erreur: impossible de résoudre le module "chargeur de fichiers"

notez que ce problème ne se produit que lorsque j'essaie de charger l'image d'arrière-plan en utilisant un chemin relatif.

ce travail bien:

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

cela cause le problème:

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

et ceci est ma structure de projet

  • images
  • modes
  • webpack.config.js

et voici mon fichier 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

Comme l'a dit @silvenon dans son commentaire:

Avez-vous installé un chargeur de fichiers?

oui le chargeur de fichiers a été installé mais cassé, et mon problème a été résolu en le réinstallant.

npm install --save-dev file-loader

43
Moussawi7

J'ai exactement le même problème et le problème suivant l'a résolu:

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

Merci pour cela - c'était la dernière pièce pour obtenir Bootstrap, d3js, Jquery, des images en ligne base64 et mon propre JS mal écrit pour jouer avec webpack.

Pour répondre à la question ci-dessus et la solution pour contourner la problématique
Module introuvable: Erreur: impossible de résoudre le module 'url' Lors de la compilation bootstrap fonts was

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

Merci!

1
Ben White