I have a project using HTML, CSS, and JS which I’m trying to use webpack 5 to build separate folders for /pages and /posts for HTML, a folder for my json files (/json-files), and separate folders/files for CSS, /media, /json-files and bundle.js.  All CSS references are in the HTML files (1 HTML file per page).  My directory structure is as follows:

index.html (home page)

    /pages (all my web HTML pages)    /posts (all my blogs HTML pages)    /stylesheets (all my CSS)    /scripts (all my custom js code with the exception of server.js and webpack.config.js)    /json-files (all my json files used by my custom js code)    /media (all my jpg, png, SVG, and MP4 files)

and all the other supporting files (e.g., package.json, node_modules, webpack.config.js, …).  These folders have subfolders as well.  This is very different than the course material.

The build process works without errors or warnings, and the webpack build does create folders /pages and /posts with my HTML, /media, and /JSON-files which seem to contain all the files (flat folder with all files into).

However, none of <link> and <script> have been removed from the HTML files.  I can manually delete them from the HTML files and site works, but they appear to be using my files in my project root (not from /build).

My project can be seen https://github.com/mmelester/intensivehope.com.git .

I’ve been fighting this for a week now.  Any guidance would be appreciated.  This is my wife’s site, and I need to get her off my back.  This is my very first website.

I’ve tried countless webpack.config.js implementations, and this is the closest I got to working. I’ve even taken a couple of Udemy webpack courses but they all are centered around js code building out the pages with all CSS coming from the js.