WebPackTemplate

WebPack Template

This repo can be used for projects that use webpack bundling. Take a look at file, have a look at

this video to understand webpack

# 📗 Table of Contents

• WebPackTemplate
• 📗 Table of Contents
• 📖 WebPack Template
  • Instructions
  • 🛠 webpack installation webpack-installation
  • 🛠 Built With HTML, CSS and JavaScript
    • Tech Stack
    • Key Features
  • 💻 Getting Started
    • Prerequisites
    • Setup
    • Install
  • 👥 Authors
  • 🔭 Future Features
  • 🤝 Contributing
  • ⭐️ Show your support
  • 🙏 Acknowledgments
  • ❓ FAQ
  • 📝 License

📖 WebPack Template

WebPack Template it can be used for projects that use webpack bundling.

Instructions

You will need to install the node_modules so the package.json and webpack.config work. copy the following commands in sequence:

• npm i -D webpack webpack-cli
• npm i -D webpack-dev-server to install the local server
• npm i -D sass style-loader css-loader sass-loader to install loaders for styling, sass, and css
• npm i -D html-webpack-plugin this will istall the plugin that will make the index.html file in the dist, its based on the tmplate file in your src
• npm i -D babel-loader @babel/core @babel/preset-env to install babel that will make your code run on browsers
• npm run build to test if webpack is working and you will see dist folder is regenrated and you will run this command anytime you wanna add images or edit the template html file
• npm run build
• npm run start to display your dist in local server(browser just like the live server extention)
• once webpack is working perfectly
• (this is opitional) install the linters test packages according to Microverse requirements
  • for eslint npm install --save-dev eslint@7.x eslint-config-airbnb-base@14.x eslint-plugin-import@2.x babel-eslint@10.x
  • for stylelintnpm install --save-dev stylelint@13.x stylelint-scss@3.x stylelint-config-standard@21.x stylelint-csstree-validator@1.x
  • for webhint npm install --save-dev hint@7.x
• after that you should be good to start your project

🛠 webpack installation webpack-installation

🛠 Built With HTML, CSS and JavaScript

Tech Stack

• HTML
• CSS
• JavaScript
• sass
• json

Key Features

• Can be used to startup any project using webpack

(back to top)

(back to top)

💻 Getting Started

To use this template just visit the repository and press on "use this template"

To get a local copy up and running, follow these steps:

• Open your Terminal in your VSCode.
• Navigate to the desired directory[folder] to which you want to clone the repository to
• [Copy & Paste] git clone you find in the code button https://github.com/GeekyHacks/WebPackTemplate.git

Prerequisites

In order to run this project you need:

• General Understanding of HTML & CSS
• basic Knowledge of Git Commands
• basic Knowledge of the Terminal Commands
• General Understanding of bundling and webpack

Setup

Clone this repository to your desired folder:

• git clone https://github.com/GeekyHacks/WebPackTemplate.git

Example commands:

  cd my-folder
  git clone https://github.com/GeekyHacks/WebPackTemplate.git

--->

Install

Must-Install-Project-with-the-Following-Programmes:

• Prettier Extention in VScode
• Git
• Node.js
• npm install

(back to top)

👥 Authors

👤 GeekyHacks Bhekisile Jozi

• GitHub: Geekyhacks
• Twitter: Geekydart
• LinkedIn: Abdullah Nasser

🔭 Future Features

• Adding more webpack deps

(back to top)

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

(back to top)

⭐️ Show your support

If you like this project please don't hesitate to support me with your valued contribution and don't forget to star the repo to reach more people.

(back to top)

🙏 Acknowledgments

I would like to thank...

• Microverse Review Team
• My Coding Partners
• Microverse Community in Slack

(back to top)

❓ FAQ

Can I clone this project ?**

• Of course you can as long as you fork it and star it

Can I contribute to this project?**

• definitely you can

(back to top)

📝 License

This project is MIT licensed.

(back to top)