Laravel mix publish images and fonts in different directory under public rather than default one

Question

I am using laravel mix which used webpack as a bundler to compile js, scss and other assets like fonts, images etc..

In order for mix to publish it to public directory i am using following webpack config. I assigned asset/resource type for images and fonts and also tried setting assetModuleFilename option of output and generator of asset rule as well with no luck.

generator file name of course complains here to publish the image in images folder multiple times due to mix also publishing there if i remove comments there.

assetModuleFilename option works but still images are anyhow going images folder in addition to that and i can not somehow prevent how Laravel mix controls these things. Also it complains when file names are in upper cases.

mix.webpackConfig(webpack => {
    return {
        output: {
            // ...
            // assetModuleFilename: (pathData) => {
            //     console.log( pathData.filename);
            //     const filepath = path.dirname(pathData.filename).split('/').slice(1).join('/');
            //     return `${filepath}/[name][ext]`;
            // },
        },
        module: {
            rules: [
              {
                test: /\.html$/i,
                type: 'asset/source',
              },
              {
                test: /\.(ttf|woff|woff2|eot|svg)$/,
                exclude: /node_modules/,
                type: 'asset/resource',
                generator: {
                  filename: '[name][ext]'
                }
              },
              {
                test: /\.(jpg|png|svg|gif)$/,
                exclude: /node_modules/,
                type: 'asset/resource',
                // generator: {
                //   filename: '[name][ext]'
                // }
              },
            ]
          },
    }
})

I would like to get image path after it has been published to images (or whatever directory as i anyhow don't want it under images) directory in public directory. In my local folder setup where i am also using webpack i am directly getting image published path when i import image from anywhere like this

// background is eventual path to the published directory with host protocol and name which 
// can be used directly in browser
import background from '../images/backgrounds/background.png';
console.log(background) 

however, here with mix, background refers to the path to the whole folder only relative to root which is Module/somemodule/resources/assets/images/backgrounds/background.png before compilation which i found very strange because it should be the final path which can be used directly in browser.

Also, I don't want to do things like mix.copy(src, dest) or anything like that because i feel that is not the correct way with webpack.

I have these two questions

1. How to not publish or prevent fonts and images a.k.a assets to their default directory and get them in custom other directories under public??
2. I should be getting final published path of my asset (in javascript and not in html) when i import my asset like this. Is there any mix function default available for that??

Answer 1

To customize the output directory of your assets in Laravel Mix, you can use the setPublicPath method. This method allows you to specify a different directory for your compiled assets. Here's an example:

mix.setPublicPath('path/to/public')
   .js('resources/js/app.js', 'js')
   .sass('resources/sass/app.scss', 'css');

In this code, path/to/public is the directory where you want your compiled assets to be placed.

However, Laravel Mix does not provide a built-in way to change the output directories for individual types of assets (like images or fonts). If you need this level of customization, you might need to manually configure Webpack, which is beyond the scope of Laravel Mix.

As for your second question, when you import an image in JavaScript, Webpack will return the final path of the image in the output directory. However, this requires the file-loader or url-loader to be configured for handling image files, which is not included in Laravel Mix by default.

If you want to import images in your JavaScript files and get their final paths, you might need to extend the Laravel Mix's Webpack configuration to include a rule for handling image files with the file-loader or url-loader. However, this can be complex and might not be necessary depending on your use case. A simpler approach might be to use Laravel's asset helper function to generate URLs for your assets in your Blade templates.