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.