html-dev-starter is a Webpack starter for develop static bootstrap template.
Starter generate low quality Images placeholder from src/images
to dist/images/lqip
Afther build you can use lazysizes to place image with blur placeholder.
<img src="images/lqip/pexels-tom-verdoot-3181458.jpg"
data-src="images/pexels-tom-verdoot-3181458.jpg"
class="lazyload" style="width: 100%;" />
- Boostrap
- jQuery
- lazysizes
Use git
to download starter and the package manager npm to install html-dev-starter
depedencies.
git clone https://github.com/Driblinho/html-dev-starter.git
cd html-dev-starter
npm i
To start development server use npm
npm start
webpack server work on localhost:9000 and will be serve static template from dist
.
To build production build use:
npm run build
Static template will be generated to dist
folder.
Html file will be formatted using Prettier
Project is created with:
- webpack version:
5.x
- lqip-modern version:
1.1.3
- webpack-dev-server version:
3.11.0
- prettier version:
2.1.2
Webpack plugins:
- clean-webpack-plugin version:
3.x
- copy-webpack-plugin version:
6.x
- mini-css-extract-plugin version:
1.2.1
- webpack-merge version:
5.3.0
- webpack-shell-plugin-next version:
2.0.4
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.