Using Webpack With React

Webpack is a bundler for javascript and friends. More info

Articles & Tutorials

Upgrading to React 17 and Webpack 5 (blog.bitsrc.io)
Dec 09, 2020
How I upgraded my project to React 17 and Webpack 5.
  • Chameera Dulanga
Setting TypeScript For Modern React Projects Using Webpack And Babel (smashingmagazine.com)
May 11, 2020
This article introduces Typescript, a superscript of JavaScript that presents the static type feature for spotting common errors as developers codes, which enhances performance, hence results in robust enterprise applications. You’ll also learn how to efficiently set up TypeScript in a React Project as we build a Money Heist Episode Picker App, exploring TypeScript, React hooks such as useReducer, useContext and Reach Router.
  • Blessing Krofegha
An in-depth guide to performance optimization with webpack (blog.logrocket.com)
May 07, 2020
These days, you have to use a module bundler like webpack to benefit from a development workflow that utilizes state-of-the-art performance optimization concepts. Module bundlers are built by brilliant people just to help you with these difficult tasks.
  • Sebastian Weber
Maintain Control: A Guide to Webpack and React, Pt. 2 (toptal.com)
Dec 05, 2019
In the first part of this React-Webpack tutorial, we discussed how to configure loaders and perform optimization. Now, we’ll get into more advanced techniques related to specific React/Webpack config use cases.
  • Michael Pontus
Maintain Control: A Guide to Webpack and React, Pt. 1 (toptal.com)
Nov 05, 2019
If you want to maintain a greater degree of control over your build process, then you might choose to invest in a custom Webpack configuration. As you’ll learn from this Webpack tutorial, this task is not very complicated, and the knowledge might even be useful when troubleshooting other people’s configurations.
  • Michael Pontus
Getting Started with Electron, Typescript, React and Webpack (sitepen.com)
Sep 17, 2019
Here we will explore an opinionated approach to setting up Electron: TypeScript, React and Webpack. We’ll start with a basic Electron project and progressively build it into an enterprise-ready solution.
  • Justin Ellison
Loading css, css-modules, and Sass with webpack (adamrackis.dev)
May 13, 2019
We’ll go over loading basic css with webpack, then move on to css modules, and wrap up with Sass.
  • Adam Rackis
Next.js 8 Webpack Memory Improvements (nextjs.org)
Feb 19, 2019
Recently Next.js 8 was introduced. The release included a massive build-time memory usage reduction. This blog post will explore how we have helped optimize webpack for the community.
How to set up & deploy your React app from scratch using Webpack and Babel (medium.freecodecamp.org)
Feb 14, 2019
This guide will cover the most simple React configuration that I’ve personally used for almost all of my React projects. By the end of this tutorial we will have our own personal boilerplate and learn some configurations from it.
  • Nathan Sebhastian
Front-End Development with JavaScript using Reactjs, Redux, Sass and Webpack (itnext.io)
Feb 11, 2019
This blog post is for JavaScript developers who wanted to develop a Web Application using Full Stack capabilities of JavaScript.
  • Bitupon Chetia
Getting Started with React TypeScript and Webpack (dev.to)
Feb 08, 2019
Here's my take on a starter project using React, TypeScript and Webpack.
  • Grant Bartlett
Setting A React Project From Scratch Using Babel And Webpack (blog.bitsrc.io)
Jan 10, 2019
The ultimate all-in-one guide to setting up a killer React project!
  • Anshul Goyal
What's the advantage with webpack? (blog.jakoblind.no)
Dec 19, 2018
Webpack feels like this huge and unnecessary thing that you just must learn and use if you wanna build a modern web app.
How to combine Webpack 4 and Babel 7 to create a fantastic React app (medium.freecodecamp.org)
Oct 11, 2018
I will focus on setting up webpack with react which will have .scss support along with code splitting
  • Adeel Imran
How to use ReactJS with Webpack 4, Babel 7, and Material Design (medium.freecodecamp.org)
Oct 10, 2018
For the past year and some, I have been working with React at Creative Tim. I have been using create-react-app for developing some nice…
  • Nazare Emanuel Ioan
React Code Style with ESLint + Babel + Webpack (robinwieruch.de)
Oct 09, 2018
You want to setup ESLint in your ReactJs project? But your project includes Babel and Webpack? This article will guide you through all the options with style guides such as Airbnb's style guide, the setup process for ESLint in React, and more beneficial recommendations to follow styling rules in your project.
Understanding webpack HMR beyond the docs (blog.jakoblind.no)
Oct 04, 2018
I have spent some days reading source codes and reverse engineering protocols. And I learned a lot about how HMR works.
Setup your own Webpack 4 config for React with Typescript (sevketyalcin.com)
Jul 31, 2018
In this tutorial, we are going to setup our own basic Webpack 4 configuration from scratch for React with Typescript.
  • Sevket Yalcin
How to build a React project from scratch using Webpack 4 and Babel (hackernoon.com)
Jun 07, 2018
create-react-app or react-slingshot are fantastic tools if you want to just focus on React and let them take care of the configuration. But is this the way you want to learn React?
  • Sukhjinder Arora
Rollup v. Webpack v. Parcel (x-team.com)
May 08, 2018
We'll take a close look at Parcel, Rollup, and the newly released webpack 4!
  • Adam Gerard
How to Create a React app from scratch using Webpack 4 (medium.freecodecamp.org)
Mar 12, 2018
For the past three weeks, I have been trying to create a React app from scratch to understand the set-up with Webpack. My aim was to set up a simple configuration which can then be grown upon.
  • Linh Nguyen My
The minimal React + Webpack 4 + Babel Setup (robinwieruch.de)
Jan 18, 2018
The article is more about teaching people how to setup their own project without a third-party boilerplate project.
Understanding Webpack and Babel (react.christmas)
Dec 20, 2017
Most apps require some kind of build pipeline to bundle your application into downloadable files. This article will give you a very simple overview over how to get started!
  • Kristofer Selbekk
Quick guide to Webpack bundle and code splitting with React (blog.logrocket.com)
Nov 15, 2017
You’re probably here because your app has grown to the point where forcing the user to download the entire thing as a single file seems cruel and unusual.
Setting up Webpack, Babel and React from scratch, revisited (muffinman.io)
Oct 07, 2017
This is detailed step-by-step guide, as I’ll try to explain the whole process.
  • Stanko Tadić
What are NPM, Yarn, Babel, and Webpack; and how to properly use them? (medium.com)
May 10, 2017
In this article, we will try to alleviate this painful experience by explaining these technologies one by one and how they work together.
  • Gasim Gasimzada

Video Guides & Talks

Watch an Amateur Spin Up a React + Babel + Webpack + CSS Modules Project (youtube.com)
Feb 25, 2019
Fair warning! This isn't a speedy, straightforward, expert-driven plow-through of how to set up these technologies. Although, by the end, we do successfully get it all going. This is about documenting the real-world experience of doing this kind of work. Some things work easily, some don't.
  • Chris Coyier
10k or Bust: The Delicate Power of Webpack and Babel (youtube.com)
Sep 21, 2018
Your app is bigger and slower than it needs to be. Without rewriting app code we can squeeze more performance out of your code by tweaking Webpack and Babel. These tools are immensely powerful but it’s a delicate dance to get them to play nice. This talk is full of tips and tricks to get you there.
Enable dynamic Hot Module Replacement with Webpack (youtube.com)
May 24, 2018
This is an example of how you can implement hot module replacement with require.context.
React & Webpack 4 From Scratch - No CLI (youtube.com)
Mar 29, 2018
In this video we will setup React WITHOUT the Create-React-App CLI. The CLI is fantastic but many people do not understand how it works behind the scenes. In this video we will setup React from scratch with Webpack 4 and Babel.
What Is Webpack? (youtube.com)
Nov 08, 2017
In this video, I up-pack what webpack is in plain english and how it can help you.
ReactCasts #7 - Hot Module Replacement in Create-React-App (youtube.com)
Dec 02, 2016
Hot Module Replacement (or HMR) is a Webpack feature that allows "on the fly" module updates for your app.
  • Cássio Souza

Courses & Video Series

Webpack for React Applications (lynda.com)
Aug 03, 2018
Discover how to optimize your web applications using the webpack JavaScript module bundler
  • Alexandru Toea
Hands-on Webpack for React Development (packtpub.com)
Jul 27, 2018
Build React-based applications and add features to them using Webpack
  • Rohan Almeida
Build a Server Rendered + Code Split App in React with React Universal Component (egghead.io)
Dec 14, 2017
In this course, you will be learn how to get your react app to load as quickly as possible to maximize user engagement
  • Tim Kindberg

Podcast Episodes

RRU 002: Webpack the Good Parts with Juho Vepsäläinen (devchat.tv)
Mar 13, 2018
In this episode of React Round Up, the panel discusses Webpack the good parts with Juho Vepsäläinen. He talks a lot about the book he has written on Webpack, which helps people understand Webpack and how to work with it. They also discuss the advantages to using Webpack and discuss how you can use it in your coding to your benefit.

Libraries

webpack (webpack.js.org)47190
v4.39.1
Aug 02, 2019
A bundler for javascript and friends
  • Tobias Koppers
  • Sean Larkin