How does your file structure during the development of the project?

Hello, learned how to work with SASS, PUG, acquainted a little with JS, I want to do the project, but to do it as competently from the point of view of its file structure, i.e. that each file was laid down in his place, as is the case in companies where web development has been a group of people, because no such experience and take it yet from where please help.
Can you throw a look at your project folder at design time and access to a production Studio, preferably with explanations what does each file or folder.
At the moment my structure looks like ~ so
dist/ - folder with the finished work
assets/
css/
index.css
js/
vendors.js
index.js
fonts/
img/
photo1
photo2
index.html
page2.html


src/
components/
global.sass
 service/ service styles
 fonts/ - directory with fonts
fonts.sass
variables.sass
mixins.sass
functions.sass
 sections/ - folder which contains a large section of the footer/header
footer/
footer.sass
footer.pug
footer.js
 block/ small block - navigation bar forms
 items/ - buttons, other minor heresy 
pages/
base/
 base.pug - template for pages
 includes.pug - find here all sections
index.pug
page2.pug
index.js - entry Point in webpack connect here all js and sass from the folder components here is such a function

function requireAll(requireContext) {
 return requireContext.keys().map(requireContext);
}

requireAll(require.context('./components', true, /\.(sass)$/));
requireAll(require.context('./components', true, /\.(jsx?)$/));
requireAll(require.context('./pages', true, /\.(jsx?)$/));


Perhaps such a file structure is quite kosyachny, please suggest not Troll, experience in the development of the file or application is more than 1 page or 1000 rows is not at all.

UPD
To work at the moment, use pug, sass, jQuery (some plugins for jQuery), plans to develop or react Vue
April 4th 20 at 14:17
1 answer
April 4th 20 at 14:19
Solution
assets/
/css
/fonts
/img
/icons
/svg
/del
/js
/libs
/components
script.js
/scss
/base
fonts.scss
base.scss
header.scss
footer.scss
/common
animation.scss
buttons.scss
elements.scss
grids.scss
typography.scss
/components
/libs
/mixins
/pages
/vars
breakpoints.scss
colors.scss
fonts.scss
transitions.scss
style.scss
 index.html

This is how looks the front, which further Belitsa and passed on Beck (I work with WP). Collect all galpon.

Find more questions by tags WebpackFrontend