Webpack: cannot resolve module 'file-loader'

Question

When I try to build SASS file with webpack, I got the following error:

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

note that this issue only happen when i try to load background image using relative path.

this Work fine:

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

this cause the issue:

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

and this is my project structure

• images
• styles
• webpack.config.js

and this is my webpack file:

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

Answer 1

As @silvenon said in his comment:

Do you have file-loader installed?

yes file-loader was installed but broken, and my issue has been solved by re-installing it.

npm install --save-dev file-loader

Answer 2

You may face a very similar issue if you are using url-loader with the limit configuration defined. As the documentation states, if the resource you are trying to load exceeds this limit, then file-loader will be used as fallback. Therefore, if you do not have file-loader installed, an error will prompt. To fix this error, set this limit to a bigger value or do not define it at all.

      {         test: /\.(jpg|png|svg)$/,         use: {           loader: 'url-loader',           options: {             limit: 50000, // make sure this number is big enough to load your resource, or do not define it at all.           }         }       }