Webpack Starter Kit

This Webpack starter kit comes with several tools and opinionated choices for your front-end development projects.

Its main purpose is to bundle JavaScript files for usage in a browser.

A starter kit workflow using Webpack, PUG, SASS, PostCSS & Babel.

⚙️ Installation

Clone the repository and substitute my-project for your real project name.

 git clone https://github.com/erwcode/webpack-starter-kit.git my-project

Once repository has been cloned, open its location from the terminal and install the npm dependencies.

 npm install

🚧 How is it work?

By setting the mode parameter to either development, production, you can enable webpack's built-in optimizations that correspond to each environment.

• npm run dev - build in development mode
• npm run build - build in production mode

Also, you can use webpack with a development server that provides live reloading. This should be used for development only.

• npm start - build and watch changes

🌳 Directory Tree

📦webpack-starter-kit
├─ 📂src
│  ├─ 📂fonts
│  │  └─ Averta.woff
│  ├─ 📂images
│  │  ├─ babel.svg
│  │  ├─ favicon.png
│  │  ├─ isotipo.svg
│  │  ├─ mockup.png
│  │  ├─ postcss.svg
│  │  ├─ pug.svg
│  │  ├─ sass.svg
│  │  └─ webpack.svg
│  ├─ 📂pug
│  │  ├─ 📂includes
│  │  │  └─ logo.pug
│  │  ├─ 📂pages
│  │  │  └─ index.pug
│  │  └─ template.pug
│  ├─ 📂scss
│  │  ├─ 📂base
│  │  │  └─ _reset.scss
│  │  ├─ 📂components
│  │  │  └─ _logo.scss
│  │  ├─ 📂layout
│  │  │  └─ _l-container.scss
│  │  ├─ 📂settings
│  │  │  ├─ _fonts.scss
│  │  │  ├─ _mixins.scss
│  │  │  └─ _variables.scss
│  │  ├─ 📂state
│  │  │  └─ _is-active.scss
│  │  ├─ 📂theme
│  │  │  └─ _dark.scss
│  │  └─ main.scss
│  └─ index.js
├─ .babelrc
├─ .editorconfig
├─ .gitignore
├─ LICENSE
├─ README.md
├─ package-lock.json
├─ package.json
├─ postcss.config.js
└─ webpack.config.js

🍻 Contributors

Name	Role
Erwin Alan Frías Martínez	Front-End Developer

⚖️ Copyright and License

Made with 💖 by ErwCode Technologies.