What is the best way to use dist and public folders in a webpack app

Question

I am trying to do a webpack project but every tutorial I see on the internet uses the same folder for assets and distribuition, but I would like to know if there's a better way to manage assets and static files in a folder and than build everything in a Dist or Build folder later.

The structure would be:

| /src -> every coding including css and other html pages.

| /public -> index.html, favicon.ico...

        | /public/assets -> put images and other stuff here

and later:

| /dist -> combine everything in here: index.html, js files and assets.

Answer 1

That should be the point of file-loader

Add this rule to webpack.config.js

{
  test: /\.(png|jpe?g|gif)$/i,
  loader: 'file-loader',
  options: {
      outputPath: 'assets',
      publicPath: 'assets',
  },
}

In webpack5, the rule can be this one, click asset-modules for more details

{
  type: 'asset/resource',
  test: /\.(png|jpe?g|gif)$/i,
  generator: {
    filename: 'assets/[hash][ext][query]'
  },
}