2015-12-18 3 views
8

Quando provo a costruire SASS file con webpack, ho ottenuto il seguente errore:Webpack: non è possibile risolvere il modulo 'di file-loader'

Module not found: Error:Cannot resolve module 'file-loader'

noti che questo problema accade solo quando cerco di caricare l'immagine di sfondo utilizzando il percorso relativo.

questo bel lavoro:

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

questa causa il problema:

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

e questo è il mio progetto di struttura

  • immagini
  • stili
  • webpack. config.js

e questo è il mio file 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'] 
    } 
}; 
+0

css-loader converte ogni 'url (...)' in 'require (...)', quindi '../ images/magnifier.png' viene prelevato da' /\.(png|jpg) $/'test. Hai installato il caricatore di file? – silvenon

+0

@silvenon, grazie per la tua risposta *** file-loader *** è stato rotto quindi l'ho reinstallato e tutto andrà bene. Grazie – Moussawi7

risposta

14

Come @silvenon detto nel suo commento:

Do you have file-loader installed?

di file-loader è stato installato, ma rotto e il mio problema è stato risolto reinstallandolo.

npm install --save-dev file-loader

+6

Per coloro che vogliono usare ['url-loader'] (https://github.com/webpack-contrib/url-loader): devi anche installare ['file-loader'] (https://github.com/webpack-contrib/file-loader) per questo, quindi esegui' npm installa --save-dev file-loader'. – totymedli

+0

Cosa succede se non voglio che il webpack carichi i file? Non ho bisogno di webpack per verificare se l'immagine esiste realmente nella cartella dist. – Kokodoko

2

I ha esattamente lo stesso problema e il successivo riparato:

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

Sembra molto utile, ma ho problemi a mapparlo nel webpack.config con le altre configurazioni del caricatore. Potresti fornire un esempio più completo? Intendi in questo modo? '{test:/\.(png | jpg) $ /, loader: require.resolve ("file-loader") + "? name = ../[percorso] [nome]. [ext]"} ' – XML

1

Grazie per questo - questo è stato il pezzo finale di ottenere Bootstrap, d3js, jQuery, immagini Base64 in linea e il mio JS scritto male per giocare con il webpack.

Per rispondere alla domanda di cui sopra e la soluzione per ottenere intorno alla problematica
Modulo non trovato: Errore: Impossibile risolvere il modulo 'url' quando si compila font bootstrap era

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

Grazie!

Problemi correlati