Ucinorn/progress

DCI Boilerplate II: Webpack + babel

A Webpack 4 boilerplate with built-in:

• HTML file generation to serve your webpack bundles using html-webpack-plugin
• ECMAScript 6 to ECMAScript 5 transpiling with babel
• CSS extraction into a single file using style-loader, css-loader and css-mini-extract-plugin
• SCSS support using sass-loader and node-sass.
• Image and font imports with file-loader
• Github Pages publishing using gh-pages

To learn more about webpack and how to create your own configuration, check out the following tutorial for a quick start: https://auth0.com/blog/zero-config-javascript-app-prototyping-with-webpack

For more advanced webpacking, check out this cool book: https://survivejs.com/webpack/introduction/

Get Started

• Setup
• Useful Commands
• Project Structure
• Credits

Setup

Useful Commands

Development

Run Webpack in Development mode and start coding!

npm start

Production

Run Webpack in Production mode.

npm run build

Deploy to Github Pages

Deploy your code to Github Pages: this script creates a 'gh-pages' branch and serves the production bundle to this branch. For this to work, make sure you already have a remote repo on github.

npm run deploy

Project Structure

Any project created with this boilerplate will follow the structure below:

Project
│   README.md
│   package.json
|   package-lock.json
│   webpack.config.js
└───src
│   │   index.html
│   └───scripts
│   |   └───index.js
│   └───styles
│   |   └───main.scss
|   └───images
|   └───fonts
└───dist

README.md

Should contain a brief description of your project, feel free to delete this guide or rename it to add your own description.

package.json & package-lock.json

These files contain various information about you, your project and the project dependencies, as well as useful scripts to help you with the development process.

webpack.config.js

Contains configuration for the webpack package bundler. This file tells webpack how to handle thw various types of files your project might contain. If you must edit this file, do so with caution.

src & index.html

The src folder contains any file you would want to add to your project, before any processing is done to it. This is the main folder you will be working in.

index.html is a template to quickly bootstrap your project so that all js and css files will be automatically added to it. In the webpack workflow, you will not need to add any new html pages to your project, instead your main entry point to the code will be your main javascript file.

scripts & index.js

The scripts folder will contain any js modules you will add to your project. In order to include these javascript modules in your project, they need to be imported into index.js.

index.js is the entry point of your project. This means that any module imported to this file can be used, and any code in this file will be executed when the browser loads the page. This is the file where you will initially make all the dom manipulations necessary to render your page.

styles & main.scss

The styles folder will contain any scss or css files (depending on your preference). In order to include additional styles in your project you must import them to main.scss.

main.scss is your style entry point. Any other scss or css imported to this file can be used, and any styles written directly to this file will be applied.

If you prefer to work just with pure css, simply rename this file to main.css. Keep in mind that if you don't use scss each stylesheet you import will make an additional request to the server, which might have an impact on page performance.

images and fonts

To include images in your scripts or styles, place your image files in the images folder, and simply import them into your script:

import cutePuppyJpeg from '../images/cute-puppy.jpg';

const someImage = document.createElement('img');

someImage.src = cutePuppyJpeg;

OR to include them in your style:

.cute-puppy {
  background-image: url('../images/cute-puppy.jpg');
}

NOTE: Don't forget to replace the cute puppy with the actual name of the image you are trying to add.

The fonts folder should include any custom font files you would like to add to your project. To use the font simply import it into your main.scss file.

dist

The dist folder will be automatically generated by webpack whenever your run the build script:

npm run build

This folder will contain your built project, ready to be deployed online.

Credits

Boilerplate created by Leandro Frigerio (@LeandroDCI)

Edited by Itamar Givon (@itamargiv) and Francesca Borg (@FranBTE)