How to fix the error: You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file?

Question

JavaScript

webpack.config.js

const path = require('path')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')

module.exports = {
    context: path.resolve(__dirname, 'src'),
    mode: 'development',
    entry: {
        main:'./main.js',
        analytics: './analytics.js'
    },
    output: {
        filename: '[name].[contenthash].js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HTMLWebpackPlugin({
            template: './index.html'
        }),
        new CleanWebpackPlugin()
    ],
    module: {
        rules: [
            {   
                exclude: "/node_modules/",
                test: '/\.css$/',
                use: ['style-loader','css-loader'],
            },
            {
                exclude: "/node_modules/",
                test: '/\.png$/',
                use: ['file-loader'],
            },
        ]
    }
}

package.json

{
  "name": "learn-webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development --config webpack.config.js",
    "build": "webpack --mode production --config webpack.config.js",
    "watch": "webpack --mode development --watch --config webpack.config.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/109k4/Learn-WebPack.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/109k4/Learn-WebPack/issues"
  },
  "homepage": "https://github.com/109k4/Learn-WebPack#readme",
  "dependencies": {},
  "devDependencies": {
    "babel-preset-es2015": "^6.24.1",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^5.0.1",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^4.5.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.12.2",
    "webpack-cli": "^4.3.1"
  }
}

Project Structure

- dist
- node_modules
- src
  - assets
    - webpack.png
  - main.js
  - index.html
- package-lock.json
- package.json
- webpack.config.js

Mistake

[email protected] MINGW64 ~/Desktop/GitHub/Learn-WebPack (main)
$ npm run dev

> [email protected]1.0.0 dev C:\Users\User\Desktop\GitHub\Learn-WebPack
> webpack --mode development --config webpack.config.js

(node:7392) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
        Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
        Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.
(Use `node --trace-deprecation ...` to show where the warning was created)
assets by status 6.9 KiB [cached] 2 assets
asset index.html 423 bytes [compared for emit]
runtime modules 931 bytes 4 modules
cacheable modules 158 KiB
  modules by path ./*.js 705 bytes
    ./main.js 302 bytes [built] [code generated]
    ./analytics.js 196 bytes [built] [code generated]
    ./user.js 207 bytes [built] [code generated]
  modules by path ./assets/ 157 KiB
    ./assets/json.json 24 bytes [built] [code generated]
    ./assets/webpack.png 157 KiB [built] [code generated] [1 error]

ERROR in ./assets/webpack.png 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
 @ ./main.js 3:0-42 5:32-39

webpack 5.12.2 compiled with 1 error in 155 ms
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `webpack --mode development --config webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\User\AppData\Roaming\npm-cache\_logs\2021-01-12T12_45_46_907Z-debug.log

Answer 1

test: '/\.png$/'
redundant quotes
test: /\.png$/