20+ Webpack Resources for Web Developers in 2021

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Building an application with React typically involves several tools. Whether you configure these on your own or use a tool meant to save you from the configuration like Create React App, the tools are still there. When you come up against a situation where you need to start from scratch or make changes to a webpack or babel configuration, it helps to understand what each tool does, how they fit together, and how they are configured. 

In this course, we’ll start from an empty directory and by the end, we will have configured a slim but powerful boilerplate project. Along the way, we’ll touch on each of the major tools and build up to the final setup to gain an understanding of each tool’s purpose and how they all work together to help you build and deliver an application.

Modern JavaScript Tooling with React

webpack is a tool to build JavaScript modules in your application. To start using webpack from its cli or api, follow the Installation instructions. webpack simplifies your workflow by quickly constructing a dependency graph of your application and bundling them in the right order. webpack can be configured to customise optimisations to your code, to split vendor/css/js code for production, run a development server that hot-reloads your code without page refresh and many such cool features.

webpack

When setting up a modern JavaScript app, we find ourselves trudging through the land of infinite configuration. Poi offers us an option of zero-configuration by providing sane defaults and hiding them away until you need to tweak a change to suit your needs.

Make Webpack Easy with Poi

Webpack is one of the most popular tools for bundling JavaScript applications and libraries, and it's growing more popular every day. It is so loaded with features that it's sometimes difficult to know what's even possible. 

In this course, Kent C. Dodds takes you through some of the most valuable features of the Webpack JavaScript module bundler. We'll learn a ton about what it takes to optimize your Webpack configuration and your application to make it as fast as it can possibly be. We'll also go over what it takes to setup and write tests with webpack, Karma, Mocha, and Chai.

This course covers Webpack 2, but should also be relevant for Webpack 1.x.

Use Webpack 2 for Production JavaScript Applications

AngularJS is an open-source JavaScript framework, maintained by Google, that assists with running single-page applications. Its goal is to augment web-based applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

angularjs

How much work would it take for you to move all of your directives and their templates to several different new directories? You'd have to update the templateUrl, script tags, etc., etc. With webpack, this can be trivial. For example, you don't need to worry about loading your templates in the $templateCache ever again. Webpack will help you modularize your css and tests. All of these things and more in this series so you can start using webpack with Angular today.

AngularJS and Webpack for Modular Applications

Some introductory lessons on Webpack (webpack.github.io). Not tied to any particular framework.

Intro to Webpack

Storybook is a UI component development environment for React, Vue, and Angular. With that, you can develop UI components without running your app.

Here I show how best to configure a React Storybook to use [Typescript](/q/typescript) (with TSX). This lets you write your reusable components with maximal type safety. Please see the provided code for the full source.

Configure React Storybook for use with Typescript

As you refactor and modify applications, it's difficult to manage and keep track of files as they become unused. Keeping this "dead" code around adds noise to your application and reduces clarity. Just as ESLint can tell us when variables become unused, Webpack (with the help of the unused-files-webpack-plugin) can tell us when entire files become unused. First, we'll install the plugin with npm and save it as a devDependency. Next, we'll use npm run scripts to build a new command that will run Webpack with the plugin. Finally, we'll learn how to use Webpack environment variables to conditionally add plugins to your Webpack config. By the end of the lesson, you'll have a useful cli command you can run to check for unused modules in your Webpack build

Delete Unused Code with Webpack and unused-files-webpack-plugin

When you uglify your Angular code with Webpack's uglify plugin, debugging your application can be a nightmare. See how easy it is to add source maps to your bundle so you can easily debug even in production.

AngularJS with Webpack - Production Source Maps

With Angular, most of the time you're specifying a templateUrl for your directives and states/routes. This means you need to make sure that you're loading in these templates into the $templateCache for your tests and production. Oh, and don't forget to update all your URLs whenever you move the files around! When you add in Webpack and the raw-loader, you don't need to do this anymore. Simply require the html file and your work is done!

AngularJS with Webpack - Requiring Templates

Webpack is a module bundler for the web. It is incredibly powerful and enables modularity in angular applications. This is the first of several lessons to get you up and going with webpack in Angular applications.

AngularJS with Webpack - Introduction

NW.js is an app runtime based on `Chromium` and `node.js`. You can write native apps in HTML and JavaScript with NW.js. It also lets you call Node.js modules directly from the DOM and enables a new way of writing native applications with all Web technologies.

nwjs

Let's add some module loading to our NW.js. Webpack and dependency management FTW!

NW.js and Webpack: A match made in heaven

Babel 6 was a major change in how Babel works and is configured. In this lesson, find out how to update this Angular application built with Webpack to use Babel 6.

For more information about how modules have changed in Babel 6, see [this blogpost](https://medium.com/@kentcdodds/misunderstanding-es6-modules-upgrading-babel-tears-and-a-solution-ad2d5ab93ce0) by Kent.

Updating Babel 5 to 6

Poi can easily launch an `index.js` file simply by running the `poi` command. This will launch a dev-server and automatically reload whenever you make changes. You can also `npm install` any package you need and `import` it right away.

Use Poi to Build an Index.js with Modern JavaScript Features

Poi ships with a sensible default for an index.html template, but it’s easy to override to customize and provide whatever you may need. You can change the title, update `links`, and even use the underscore templating system.

Customize Poi's Default index.html Template

Poi uses the `ejs` templating language for the main template. When you create a `poi.config.js`, you can customize how to render the main template using configuration settings.

Configure Poi for Advanced Template Control

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Poi uses the Vue babel presets by default, so there is no additional install required to get up-and-running. You can even use the `.vue` file format without having to configure anything.

Build a Vue App with Poi

Developing React with Poi is as easy as adding the `babel-preset-react-app` to a .babelrc and installing React. This lesson will walk you through that quick process and get your React app up-and-running.

Customize Babel to Build a React App with Poi

Webpack enables modularity by allowing you to require the styles needed for a particular component. Adding preprocessors is a breeze and it simplifies the deployment of your css assets.

Webpack CSS, Preprocessors, and url assets

Poi uses sensible defaults for importing `.css` files. Sass isn't included by default, but simply installing the required packages gets you up-and-running. This lesson walks you through importing `css` and `scss` files into your project.

Compile CSS or Sass with Poi

Poi ships with many webpack loaders included, but you may run into scenarios where you'll need to customize and add your own. This lesson covers adding `react-markdown-loader` to Poi to load Markdown files as React components.

Topics

Instructors

Content Type