Webpack 4: Beyond the Basics

In this episode we setup a new project with the Webpack Dev Server.

In this episode we jump into loaders with CSS and show how easy it is to get hot-reloading working right out of the box.

In this episode we continue our discussion of loaders by adding HTML and Image loaders to our Webpack Setup.

In this episode we add Babel JS to our development setup to get Javascript transpiling working.

In this episode we dive into Babel to get ES2017 syntax going using a preset, which loads multiple plugins.

In this episode I create a webpack-dev-server from scratch using Express and middleware.

In this episode I finish the dev setup by using nodemon to reload our server side code as well. 

In this episode I show how easy it is to setup debugging with Chrome in either the browser or Node environments.  We also hook up source maps.

We jump into front-end frameworks with the basics of JSX and React in Webpack.

We finish our React integration by showing how state can be maintained during an edit, with webpack and the Hot Module Loader

We switch out our plan html for three kinds of HTML template.  EJS is the most common, Pug is the most fun, IMO and Handlebars, well, is also an option.

CSS preprocessors are an indispensable part of any real world workflow.  CSS is cool, but Sass, Less and Stylus let you write effective css in half the time.

In this episode we venture into dynamic class names in our React setup using CSS Modules or the Emotion Package.

We begin a journey into Angular, by showing how Webpack can be used to compile Typescript.

We illustrate how to hook Angular into the bare webpack boilerplate we've been using.  It's a little more understandable than the Angular CLI.

In this episode we side step the VueJS CLI to show how easy it is to use Webpack and the Vue JS Framework.

On to production setup using the simplest solution.  Heroku.  We go from beginning to end.  Getting our boilerplate up on Heroku running in a node environment with a Procfile.

Let's talk about optimizing CSS. The various strategies employed and the tools that make them simple.  We get into an example to show just exactly what CSS optimizers do.

So now we want to do the same for our Javascript files.  We discuss how npm packages use production environments and if statements to pull out unneeded code for huge gains.

How does Babel and Uglify parse mangle and minify our JS code?  Turns out AST's are very useful in understanding code and how best to optimize it for delivery.

Last but probably most helpful are 2 technologies for compressing text files that virtually all browsers can use.  Brotili and Gzip help us squeeze all that we can out of our production payloads.

We take a short break from optimizing to hookup React and separate the data from the components.  We see our blog taking shape.

While JSON works, markdown is much better for Blogging.  Find out how webpack handles markdown as we hookup our very first post in our blog.

We need a way to visually understand our bundles.  The Bundle Analyzer does just that.  We'll use the stats file webpack exports to visually understand our code before we manually break things apart into application and 3rd party (vendor) code.

We get started with server side rendering.  Hooking up our first react component and feeding it through the StaticRouter

We keep moving with a look at how webpack can compile code meant to be run in node instead of the browser.  We use this to show how Webpack 's loaders can bring any kind of file to the server-side.

In part 1, we delve into separating your configs by runtime and environment and using webpack for everything inside express.

In part 2, we get into the HotServerMiddleware and the configuration for production, which basically uses webpack to create a piece of middleware than statically renders our app.  For SSR in development.

React Router is a great way to hook up multiple pages on both the client and the server.  We explore how this library fits into the webpack ecosystem.

Dynamic imports have been a hard nut to crack in Webpack until recently.  With the addition of magic comments, we can load js on click, or really on anything.

Now we arrive at the really impossible stuff.  Dynamically importing our site page by page, and splitting up bundles on the client and the server.

And for our final trick in Server side rendering, we figure out the holy grail of Webpack setups.  Dynamic CSS and JS loading in parallel as we navigate our new site.  Tada!

In this episode we begin to setup our local environment to test and use subdomains in development.  We discuss etc/hosts & DNSMasq

In this episode we add the multiple domain functionality we've been craving and see how simple scoping on data files can change everything.

In this episode we discuss strategies for adding additional CSS on a per domain basis.  This is the beginning of a much larger discussion about themes, skins, white-labeling on the Web.

In this episode we improve our Articles Component with real content and some styling for a real blog-like look.  Not much new webpack insights in this episode.  Long and can be skipped.

In this episode we're going to get started integrating Redux and Webpack on the Client and the Server.  We're going to dispatch a simple action.  Finally we'll setup Redux Devtools in the store.

In this episode we're going to setup the Asynchronous actions using Redux Thunk.  We'll quickly move through fetching from an express endpoint on your local server and updating the UI with the response data.

In this episode we finish the API endpoint to properly serve markdown as a JSON blob.  We also setup HMR for reducers.  Full loading of articles on the client side.

In this episode we finish off our blog by rendering the markdown data on the server side using Redux and promises.  We then get into setting up an initial state in the rendered HTML.

The upgrade is not too bad but I wanted to walk you through upgrading the NPM Packages that go with Webpack 4.  We do 2, one for development and one for a more advanced production setup.  Don't let the length of the video scare you, it's a few lines of changes.

This webpack course is your webpack course.  What can I explore for you?  I'll be adding a new episode every week until I knock down the top instructor in this keyword with my knowledge hose.