What configuration is needed for Webpack to do these things?

I've spent two day reading, and following tutorials. I have learned a lot, but I am stuck. I was able to accomplish things listed in tutorials but not combine them together.

Please write me a configuration file that would these things

1. Compile Sass/Scss files into CSS file into public folder, not inline them anywhere.
2. Transpile JSX/Es6 files into one file (I got this).
3. Auto Refresh/Load page when Css OR Html changes.
4. Auto Refresh/Load page when Javascript changes or React component etc.
5. Plus Run via my own Nodejs Express server, not use webpack dev server, I want to avoid running multiple simultaneous processes. They make things hard.
6. Whenever Css or js files changes, put hash into the file name for cache busting.
7. ...Related to previous step, go through all templates and update urls everywhere they were generated.
8. ...remove old hashed files.
9. Minify, and generate Source Maps.

So Compile/Transpile Files, Live/Hot Reload, Hash Filenames, minify, and sourcemaps.

Right now I am thinking of abandoning Webpack, and only use it for transpiling and do everything in Gulpjs.

stuff in bold is where I had a lot of trouble as well. Existing Solutions include generating JSON file, and reading them per request (inefficent!), generating full html file and injecting them (breaks many flows plus cant modify script tag with special attributes if needed, they get written over).

via Muhammad Umer