D4GR4SS / rock-paper-bundle

"Rock Paper Scissors game with Webpack integration"

Rock, Paper, Bundle! 🪨 📄 ✂️

Welcome to the Rock, Paper, Bundle off-platform project! 🎉 In this project, we'll dive into the exciting world of Webpack and apply it to a finished Rock Paper Scissors game web app. 🚀

Project Overview

This off-platform project is part of the Codecademy Front-End Path. Our goal here is not to add new features to the game but to enhance it by integrating Webpack. 🛠️ We'll be focusing on restructuring the project to use Webpack as a build tool to bundle our resources efficiently. 📦

What You'll Learn

By completing this project, you'll gain hands-on experience in:

• Configuring Webpack to bundle JavaScript, CSS, images, and other assets.
• Optimizing the project structure for better organization and maintainability.
• Understanding how build tools can streamline the development process.
• Leveling up your front-end development skills while having fun! 🌟

Instructions

1. Clone the Repository: Clone the provided repository containing the Rock Paper Scissors game.
2. Install Dependencies: Run npm install to install the necessary dependencies, including Webpack and related loaders/plugins.
3. Configure Webpack: Set up Webpack configuration to bundle your project's resources effectively.
4. Test Your Setup: Ensure that your project builds successfully using Webpack without any errors.
5. Celebrate!: Sit back, relax, and enjoy your newly bundled Rock Paper Scissors game! 🎮

Project Structure

project
│   package.js
│   package-lock.js
│   webpack.config.js
└───code
│   │   template.html
│   │   main.js
│   │   game.js
│   │   utils.js
│   │   styles.css
│   │   assets
│   │   └───fira_code
│   │	│   │   └───FiraCode-Regular.woff
│   │	│   │   └───FiraCode-Regular.woff2
│   │   └───paper.png
│   │   └───scissors.png
│   │   └───rock.png
└───dist
    │   bundle.js
    |	FiraCode-Regular.woff
    |	FiraCode-Regular.woff2
    │   index.html
    │   paper.png
    │   scissors.png  
    │   rock.png  

Resources

• Webpack Documentation
• Codecademy Front-End Path

Let's Get Bundling! 🎉

Ready to take your Rock Paper Scissors game to the next level with Webpack? Let's dive in and bundle up some fun! 💻 If you have any questions or need assistance, don't hesitate to reach out. Happy coding! 🚀