Skip to content
Webpack boilerplate to create projects from scratch
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.babelrc
.env.example
.eslintrc.json
.gitignore
LICENSE.md
README.md
index.js
package-lock.json
package.json
postcss.config.js
webpack.common.js
webpack.dev.js
webpack.prod.js
yarn.lock

README.md

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
$ cp env.example .env
$ yarn install
$ yarn build && yarn dev

NOTE: run the last command only the first time that you start the devserver. This is because the assets and default index should be copied to the dist folder where webpack dev server will look for contents.

Commands

Start dev server

$ yarn dev

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

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.