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. 🚀
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. 📦
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! 🌟
- Clone the Repository: Clone the provided repository containing the Rock Paper Scissors game.
- Install Dependencies: Run
npm installto install the necessary dependencies, including Webpack and related loaders/plugins. - Configure Webpack: Set up Webpack configuration to bundle your project's resources effectively.
- Test Your Setup: Ensure that your project builds successfully using Webpack without any errors.
- Celebrate!: Sit back, relax, and enjoy your newly bundled Rock Paper Scissors game! 🎮
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
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! 🚀