CODEWITHSUNDEEP
reactjswebpack
Drostan
Drostan

Reputation: 1839

Having a problem setting up my webpack config for images

I'm importing a PNG into my index.js file, thus:

import logo from './images/logo.png';

Further down in my index.js I'm calling the file, thus:

<div><img src={logo} alt="Logo" /></div>

My webpack is configured thus:

module.exports = {
  module: {
    rules: [
      {
          test: /\.(png|jp(e*)g|svg)$/,  
          use: [{
              loader: 'url-loader',
              options: { 
                  limit: 8000, // Convert images < 8kb to base64 strings
                  name: 'images/[hash]-[name].[ext]'
              } 
          }]
      },
      {
        test: /\.js?$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        query: {
          presets:['react']
        }
      },
      {
        test: /\.css$/,
        use: [
          {
            loader: "style-loader"
          },
          {
            loader: "css-loader",
            options: {
              modules: true,
              importLoaders: 1,
              localIdentName: "[name]_[local]_[hash:base64]",
              sourceMap: true,
              minimize: true
            }
          }
        ]
      }
    ]
  },
  plugins: [htmlPlugin]
};

However, I'm getting errors stating that the 'url-loader' can't be resolved.

Just to give more context my file structure is thus:

images - clark-logo.png index.css index.html index.js

Does anyone know what the problem may be?

Upvotes: 0

Views: 25

Answers (1)

Damien Leroux
Damien Leroux

Reputation: 11703

Just for the record, as a solution to your problem:

url-loader needs to be installed using: npm i url-loader

Upvotes: 1

Related Questions