Wsrtjtyk

I'm new to configuring webpack. I know it's used a lot for application frameworks like React, Angular, etc; but I don't need those. I'm asked to setup a project where we'll create components in pure HTML/CSS(Sass)/JS that will later on be put together for templates, (purely for design purposes). Basically similar to how React does its components without React itself.

How do I setup a project similar to the structure below with webpack and the plugins that go with it?

Many Thanks

Example structure:

-rootfolder:

    -dist/

    -src/

        -components/

            -progress-bar:

                -progress-bar.html

                -progress-bar.scss

                -progress-bar.js

            -accordion/

                -accordion.html

                -accordion.scss

                -accordion.js

            -alert/

                -alert.html

                -alert.scss

                -alert.js

        -templates/

            -home.html

            -user-profile.html

            -user-dashboard.html

The way to setup a Webpack project for just HTML/SASS/JS is pretty much similar to setting up a React project. If you Google webpack 4 zero config you'll find some very good articles that give you some step-by-step instructions.

You will need the following plugins with Webpack 4:
1. html-webpack-plugin
2. mini-css-extract-plugin