About

A starter project boilerplate for using SCSS and Webpack.

At its core, webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it internally builds a dependency graph from one or more entry points and then combines every module your project needs into one or more bundles, which are static assets to serve your content from.

Usage

Get up and running with these simple steps:

Don't forget to substitute project-name with your project's name

Clone the project

git clone git@github.com:petrosAth/webpack-project-boilerplate.git `project-name`

Get in the project's directory and install npm dependencies

cd `project-name`
npm install

Modify Neovim project configuration file and restart Neovim

nvim .nvim/init.local.lua

Run npm run dev

Plugins and tools

Babel
- Babel preset-env: Enables the use of the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by the target environment
SASS: It is a CSS extension that is used to add features like variables, nested rules, mixins, inline imports, inheritance and more, all with fully CSS-compatible syntax.
PostCSS: A tool for transforming CSS with JavaScript
- PostCSS Preset Env: Enables the use of the latest CSS features by modifying the end CSS code to ensure browser compatibility
- Autoprefixer: Automatically add vendor prefixes in CSS to ensure browser compatibility
Webpack Bundle Analyzer: Visualize size of webpack output files with an interactive zoomable treemap
Webpack Dev Server: Serves the webpack app and provides live browser reloading on file changes
ESLint: Linter that statically analyzes the JavaScript code to quickly find problems

This project is based on Grant Barlett's React TypeScript Webpack Starter