An open API service indexing awesome lists of open source software.

https://github.com/zcemycl/webpack-js-mpa-example

Example of javascript good practice.
https://github.com/zcemycl/webpack-js-mpa-example

javascript jest mpa mvc puppeteer webpack

Last synced: about 1 month ago
JSON representation

Example of javascript good practice.

Awesome Lists containing this project

README

          

# Multi Pages Webpack ![example workflow](https://github.com/zcemycl/webpack-js-mpa-example/actions/workflows/main.yml/badge.svg) [![Coverage Status](https://coveralls.io/repos/github/zcemycl/webpack-js-mpa-example/badge.svg?branch=main)](https://coveralls.io/github/zcemycl/webpack-js-mpa-example?branch=main)
- Each html should have its corresonding `bundle.js`.

## Techniques
1. Model View Controller (MVC)
2. Jest for unit testing
3. Puppeteer for e2e testing
4. Webpack
5. MultiPages Application
6. Github action to deploy github pages

## How to start?
1. Create `webpack.config.js`, and edit it.
2. Initialise npm. `npm init`
3. Edit `package.json`.
4. Install following packages.
```
npm install --save-dev webpack webpack-cli lite-server
```

### References
1. [Creating Multiple Bundles for Multiple Pages with Webpack - Ep. 7](https://www.youtube.com/watch?v=PcPzKMZzyqc)
2. [SPAs vs MPAs/MVC - Are Single Page Apps always better?](https://www.youtube.com/watch?v=F_BYg2QGsC0)
3. [Continuously Deploy Static Pages with Github Actions & gh-pages](https://javascript.plainenglish.io/continuously-deploy-static-pages-with-github-actions-gh-pages-207e4a009d1c)