File & Folder Structure for Express app with Webpack

Question

my question is similar to this question here, but unfortunately I am still unsure about what the correct/best practice approach is.

So far I've created an express app with the following folder structure:

myproject/
|-app.js
|-middleware/
|-models/
|-public/
    |-css/
    |-js/
|-routes/
|-views/

Now I want to add webpack to use it for frontend bundling, hence the public/ and views/ folder.

However, Webpack uses an entry point and output folder. I often see the usage of a src/ and dist/ folder like the following:

myproject/
|-src/
|-dist/

My question is, what happens to all my other files and folders as for example my routes/ and models/ folder? Do I put them in the dist/ folder from the very beginning and only include my files that get bundled in the src/ folder?

myproject/
|-src/
    |-views/
    |-style.css
    |-index.js
|-dist/
    |-middleware/
    |-models/
    |-public/
        |-style.bundle.css
        |-index.bundle.css
|-routes/
|-views/
|-apps.js

Edit: The Webpack docs state the following:

In general it's good practice to clean the /dist folder before each build

As the clean-webpack-plugin deletes the entire /dist folder I do not believe that the folder structure mentioned above is the right one.

Or do I include everything in my src/ folder? If so, what is the correct way to process my server-side files so they end up in the dist/ folder?

Or is the right approach to add an src/ folder to my base-structure and use my public/ folder as my output folder? What happens with the src/ folder when I want to deploy the app? Do I have to manually delete the folder every time, do I just keep and forget about it?

Would be great to get some advice on what the right approach is.

Thank you very much in advance!