Webpack Boilerplate
Hi there!
This repository is intended to be a boilerplate for a quick start for my web development, I don't know how many repositories must be exist out the, but apart of be just another one is also a record of my learning in my daily job and readings about web technologies.
This boilerplate is made for compile and build files using Webpack configured with Babel Bootstrap 4 and Sass.
This Boilerplate is inspired in this post of Margarita Obraztsova
Thanks Margarita!
If you like it send me a tweet!
What include this configuration?
Installation
Clone repository
$ git clone https://github.com/wilcho-vnz/webpack-boilerplate.git
$ cd webpack-boilerplate
$ yarn install
Commands
Start dev server
$ yarn start
Build files
$ yarn build
Build for production
$ yarn build:prod
How to
Generating html from pug files
html files from pug files are generated when the command build is used
Handle background images
The files used as background images should be stored in src/assets/img/ and in your sass files call it, for example:
background-image: url("../assets/img/bg-test.png");
Handle fonts
The fonts files should be stored in src/assets/fonts/ and have to be added in _typography.scss file, for example:
@font-face {
font-family: 'font-name';
src: url('../assets/fonts/font-name/font-name.eot');
src:
url('../assets/fonts/font-name/font-name.eot') format('embedded-opentype'),
url('../assets/fonts/font-name/font-name.woff2') format('woff2'),
url('../assets/fonts/font-name/font-name.woff') format('woff'),
url('../assets/fonts/font-name/font-name.ttf') format('truetype'),
url('~../ssets/fonts/font-name/font-name.svg#font-name') format('svg');
ESLint configuration
VS Code recommended User Settings JSON configuration
{
...
// these are all my auto-save config
"editor.formatOnSave": true,
// turn it off fot JS
"[javascript]": {
"editor.formatOnSave": false,
},
"eslint.autoFixOnSave": true,
"eslint.alwaysShowStatus": true,
...
}
References
License
MIT