🎭 webpack-template

A webpack template for your vanilla JavaScript projects with automatic deployments on Github Pages.

▶ Live Preview

Features

• ESLint
• Axist minimal CSS library
• Prettier
• Webpack
• Babel
• Automatic website deployment on Github Pages

Installation

There are two ways to use this template. In either ways, you must edit the project name and description in package.json.

Method 1

Click on the Use this template option at the top right corner of the Github page.

Method 2

Clone project:

git clone git@github.com:creme332/webpack-template.git

🔴 Note: If you are placing this project in another project already having a .git folder, delete the .git folder in this project to prevent interference.

Install dependencies:

npm install

Usage

Local

To run project in development mode:

npm start

Open http://localhost:8080/ in your browser. If everything is working fine, you should see a spinning box.

To create a production build:

npx webpack

To generate webpack stats:

npx webpack --profile --json=compilation-stats.json

🟢 Tip: Use this website to visualize your webpack statistics.

🟢 Note: For more webpack customizations visit https://createapp.dev/webpack/no-library.

Github pages

Enable Github pages in your repository settings and deploy from the gh-pages branch. The site will be live at https://<username>.github.io/<reponame>/ (ex: https://creme332.github.io/webpack-template/);

To-do

• Follow Frontend checklist
• Use pageInsight to test website after deployment.

Attributions

Resource	Source
Drop-in Axist CSS library	https://github.com/ruanmartinelli/axist