guychienll / template-webpack

the quick started template for webpack

README

Table of Contents

• README
  • Table of Contents
  • Prerequisites
  • Getting Started
    • Clone the repository
    • Install dependencies
    • Run the application
      • Build the application
        • development build
        • production build
  • Storybook

Demo Links

• Demo
• Storybook
• Github

Architecture

flowchart TD

    subgraph script
        ts
        tsx
    end

    subgraph stylesheet
        scss
    end

    subgraph webpack
        script --> babel-loader --> .dist/bundle.js
        stylesheet --> sass-loader --> postcss-loader --> css-loader --> mini-extract-css-loader --> .dist/main.css
    end

    .dist/bundle.js --> html
    .dist/main.css --> html

    subgraph html
        script-tag
        link-tag
    end

    html --> browser --> client

Loading

Prerequisites

Dependency	Version
node	v18.17 or higher
npm	v9.6.7 or higher

Getting Started

Clone the repository

git clone

Install dependencies

npm install

Run the application

Development watch mode would be run on https://localhost:3000

npm run dev

Build the application

development build

npm run build:dev

production build

npm run build:prod

Storybook

npm run storybook