Welcome to the Web Hacker's Cookbook! This course will guide you through building modern JavaScript applications using the Webpack module loader and asset bundler. Designed for those who have explored Webpack basics but seek a deeper understanding, this course ensures every moment is valuable with well-rehearsed and edited lessons tailored for all skill levels.
Course Overview
Tackle real-world projects as we build practical Webpack apps from scratch. We will begin with the ideal Webpack development setup, focusing on creating a Markdown blog similar to Ghost. This includes Hot Module Reloading, Babel, and Node debugging. Then, we'll explore Webpack's production optimization features, transforming our boilerplate into a functional portfolio website.
The Final Project
The ultimate challenge is extending our portfolio site into a multi-domain node application that mimics WordPress MU, Tumblr, or SquareSpace, all managed from a single node server. We'll dive deep into Webpack 4's latest features, covering Server-side Rendering, dynamic imports with "magic comments," Universal React components, and CSS Chunks in Parallel. This end-to-end journey promises to be both educational and rewarding.
Frameworks and Integrations
This course will also cover the various frameworks and libraries integrated with Webpack. Whether you're enhancing a legacy Rails project or crafting new designs using EJS, Pug, Handlebars, Sass, Less, Stylus, CSS Modules, Angular, or Vue JS, you'll gain the tools to build your site exactly as desired.
Requirements
- You should have some initial training or experience with coding and software installation.
- A strong desire to delve quickly into the intricacies of libraries and frameworks is essential.
- An understanding of the command line, a code editor, and readiness to follow along are required.
Target Audience
Who this course is for:
- Individuals seeking in-depth, visual, code-driven guidance beyond the standard Webpack setup.
- Those interested in exploring real-world Webpack challenges and unusual cases not covered elsewhere.
- Anyone eager to deepen their knowledge of modern JavaScript development beyond their peers.
Learning Outcomes
What you'll learn:
- Create a custom Hot-reloading Webpack boilerplate from scratch.
- Optimize frontend assets for efficient, compact production code.
- Build a portfolio or blog platform utilizing Markdown for content creation.
- Engage in deep explorations of Webpack Plugins and Loaders.
- Achieve seamless Server-side Rendering with parallel Code Splitting in Webpack.
- Understand the internal mechanics of Webpack, Babel, Node, and various JavaScript libraries.
- Develop a multi-domain application akin to SquareSpace, WordPress MU, or Tumblr.
- Utilize Chrome DevTools for code debugging, inspection, and performance auditing.
- Secure online applications with SSL and deploy to Heroku for cloud hosting.
