CODEWITHSUNDEEP
javascripthtmlcsswebpackwebpack-4
Shaoz
Shaoz

Reputation: 10653

Setup a pure HTML/CSS components project with Webpack

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

Upvotes: 0

Views: 291

Answers (1)

Jose Guerra
Jose Guerra

Reputation: 64

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

Upvotes: 1

Related Questions