cannot load png files with webpack, unexpected character

Question

Im trying to reconfigure my webpack, and now i cannot load the css files. i keep my styles in src > styles > main.css

I am getting errors such as

ERROR          


        

Answer 1

You are missing an appropriate loader that would match that png of yours. To fix this, set up either url-loader or file-loader so that it matches your png.

url-loader has a limit option you may find useful. It allows you to control whether or not it emits dataurls (inline) or paths (uses file-loader and emits files matching to paths).

Answer 2

You can use image-webpack-loader with file-loader https://www.davidmeents.com/blog/how-to-set-up-webpack-image-loader/

1) install them

$npm install image-webpack-loader file-loader --save-dev

2) add to webpack.config.js below babel-loader your new set: image-webpack-loaders and file-loader

module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0'],
          plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
        }
      }, 
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loaders: [
          'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
          'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false'
        ]
      } 
    ]
  },

3) Import your .jpg file into variable (for me it is 'imgabout' variable) and add this variable into src

import React from 'react';
import imgabout from './img-about.jpg';
export default class Article extends React.Component {
render() {

    const { title } = this.props; 

    return (
      <div class="col-md-6"> 
         <img class="img-about" src={imgabout} alt="Logo" />
      </div> 
    );}}  

Answer 3

Try to Restart the packager it fix it for me.

Answer 4

Just an update, I got warnings using this setup for webpack.config.js

So to solve the warnings I have to change to this:

{
        test: /\.(jpe?g|png|gif|svg)$/i,
        use: [
          {
            loader: 'file-loader',
            options: {
              query: {
                name:'assets/[name].[ext]'
              }
            }
          },
          {
            loader: 'image-webpack-loader',
            options: {
              query: {
                mozjpeg: {
                  progressive: true,
                },
                gifsicle: {
                  interlaced: true,
                },
                optipng: {
                  optimizationLevel: 7,
                }
              }
            }
          }]
      }