Asset Module Webpack create an extra folder

Question

I am using the new asset module instead of loader-file but I have a problem because it creates two folders. It seems that is a easy stuff but I spent a lot of time searching and I can't get any solution. Here is my webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');

module.exports={
    entry:'./src/index.js',
    output:{
        path:path.resolve(__dirname ,'build'),
        filename: 'javascript/[name].js',
        assetModuleFilename: '../images/[name][ext]'
    },
    module:{
        rules:[
  
            {
                test: /\.scss$/,
                use:[
                    // Creates `style` nodes from JS strings
                    {loader : MiniCssExtractPlugin.loader },
                    // Translates CSS into CommonJS
                     {loader:"css-loader"},
                     // Compiles Sass to CSS
                    {loader:"sass-loader"}    
                ]
            },          {
                test: /\.(png|jpg|gif)/,
                type: 'asset/resource'
              }

        ]
    },
    plugins:[new HtmlWebpackPlugin({
        template: './src/index.html'
    }), new MiniCssExtractPlugin({
        filename: 'style/style.css'
    })]
}

the structure of my file are:

-src
  -images
   *logoface.png
  -scss
   *style.scss
*package.json
*webpack.config.js
*package-lock.json

the result structure is:

-build
 -images
  *logoface.png
 -javascript
  *main.js
 -style
  *style.css
*index.html
-images
 *logoface.png

Here my package.json, you can see the build-test where I delete the extra folder. I want the right solution. thanks a lot for your help I am still learning.

{
  "name": "testingNodeJs",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode development --watch",
    "build-test": "webpack --mode development && rm -fr images",
    "build-dev": "webpack --mode development --watch && rm -fr images"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "copy-webpack-plugin": "^7.0.0",
    "css-loader": "^5.1.0",
    "html-webpack-plugin": "^5.2.0",
    "mini-css-extract-plugin": "^1.3.9",
    "sass": "^1.32.8",
    "sass-loader": "^11.0.1",
    "style-loader": "^2.0.0",
    "webpack": "^5.24.2",
    "webpack-cli": "^4.5.0"
  }
}

Answer 1

I solved it, I changed the assetModuleFilename: '../images/[name][ext]' to assetModuleFilename: 'images/[name][ext]' and then changed the configuration of MiniCssExtractPlugin with:

module: {
        rules:[
            {
                test: /\.(scss)$/i,
                use:[
                    {
                        loader : MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../',
                        }
                    
                    },
                    "css-loader",
                    "sass-loader"
                ]
            },
            {
                test: /\.(png|jpg|jpeg|gif)/,
                type: 'asset/resource'
              },
            ]
         },

where the public path is

publicPath: '../'

I hope it helps anyone else.