Learn how to use webpack to bundle JavaScript, images, fonts, and styles for the web and set up a development server.

webpack used to be a frustrating and overwhelming beast to me. I felt safe using something like create-react-app to set up a project, but I avoided webpack if at all possible since it seemed complex and confusing.

If you don’t feel comfortable setting up webpack from scratch for use with Babel, TypeScript, Sass, React, or Vue, or don’t know why you might want to use webpack, then this is the perfect article for you. Like all things, once you delve in and learn it you realize it’s not that scary and there’s just a few main concepts to learn to get set up.

In addition to this article, I’ve created an extremely solid webpack 5 Boilerplate to get you started with any project. I also recommend checking it out if you’re familiar with webpack 4 but want to see a webpack 5 setup.

Prerequisites

• Basic familiarity with HTML & CSS
• Basic knowledge of JavaScript and programming
• Familiarity with ES6 syntax and features
• Ability to set up a Node.js environment
• Knowledge of the command line

Goals

• Learn what webpack is and why you might want to use it
• Set up a development server with webpack
• Set up a production build flow using webpack

#webpack #webpack 5 #html #css #javascript