CODEWITHSUNDEEP
webpackloader
richgkav
richgkav

Reputation: 85

How to use file-loader with webpack

I am getting the error.

ERROR in ./src/images/whitepark-bay.jpg 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type

Here is the loader installed OK.

richgk@DESKTOP-54JFAJP:~/projects/antrim-walks$ npm install file-loader --save-dev
npm WARN [email protected] No description
npm WARN [email protected] No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/watchpack-chokidar2/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ [email protected]
added 4 packages from 6 contributors and audited 420 packages in 6.973s

Also the webpack.config.js

const path = require('path');
module.exports = {
    module: {
        rules: [
          {

            test: /\.css$/,
            use: [
              'style-loader',
              'css-loader'
            ],

            test: /\.(png|gif|jpg)$/i,
            use: [
              {
                loader: 'file-loader',
              },
            ],

          },
        ]
    },
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
    },
    mode: 'development',
};

I'm not sure what I've done wrong, it all looks the same as another project where I used file-loader (also tried url-loader) with no issues.

Thanks.

Upvotes: 1

Views: 3420

Answers (1)

sdgluck
sdgluck

Reputation: 27327

You have put the file-loader module rule in the wrong place. It should be a separate rule to the css- and style-loader rule.

What you have:

{
    test: /\.css$/,
    use: [
        'style-loader',
        'css-loader'
    ],

    test: /\.(png|gif|jpg)$/i,
    use: [{
        loader: 'file-loader',
    }, ],

},

What you want:

{
    test: /\.css$/,
    use: [
        'style-loader',
        'css-loader'
    ],
},
{
    test: /\.(png|gif|jpg)$/i,
    use: [{
        loader: 'file-loader'
    }],
},

Upvotes: 1

Related Questions