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

▶ Live Preview

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

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

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

Clone project:

git clone [email protected]: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

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.

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/);

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