Webpack 4

In this series we will be focusing on all things Webpack 4. We will start one or more articles that can be used to get up and running using webpack in a brand new project as quickly as possible. The subsequent articles will be more in depth and will be based on the documentation.
#10 Step By Step: Lazy Loading
#10 Step By Step: Lazy Loading
If you have ever found yourself in the situation where your application supports functionality that not everyone uses all the time but adds a noticable amount to your page weight or everyone uses the functionality but it is not needed right away and you would like to defer loading the code until a future time, for example in response to a user action, then lazy loading may just be the answer to your prayers. In this article we will see how to lazy load code using webpack.
#9 Step By Step: Split Chunks Plugin
#9 Step By Step: Split Chunks Plugin
In this article we will go over how to separate out the code that we write from the third party code that typically lives within the node_modules folder. We will start off by putting all of this third party code into a single bundle and we will end by seeing how we can take out specific parts and place them in their own bundle.
#8 Step By Step: Bundle Analyzer Plugin
#8 Step By Step: Bundle Analyzer Plugin
If you are curious and open up a bundle built by webpack you will find as your application gets more and more complex that it is pretty hard to have a broad understanding of what is contained within it. On top of that you would have no idea of the overall size of the bundle or the size of the individual components that make it up. Knowing these things are very important for us to first decide what we really need to include and once we have decided that to make those things as small as possible. In order for us to gather this information we are going to use the webpack bundle analyzer plugin.
#7 Step By Step: Hot Module Replacement
#7 Step By Step: Hot Module Replacement
In this article we will take a step by step approach to setting up hot module replacement for both our javascript and css styles for our index bundle. In order to do this we will also implement a very simple server using express js.
#6 Step By Step: Typescript
#6 Step By Step: Typescript
Just like we did in the previous article when we configured webpack to handle scss files instead of css it is now time to add the ability to process typescript files. In addition to this we will also setup tslint to help us make sure our typescript files are as error free and formatted correctly as possible.
#5 Step By Step: Sass with Autoprefixer
#5 Step By Step: Sass with Autoprefixer
In this article we will make use of autoprefixer to apply vendor specific tags to our css when needed as well as convert over from using css to using scss. As most people are well aware of the nature of web development requires us to take into account what browser our users might be using. In the area of css this is done by applying vendor prefixes to our styles where needed, which would get very annoying if we had to do it by hand. Luckily we have a tool such as autoprefixer to apply those prefixes for us. In addition to that we can make structuring large projects easier by using a css preprocessor instead of css itself. My choice for preprocessor is scss which we will configure webpack to use.
#4 Step By Step: Javascript and Css
#4 Step By Step: Javascript and Css
In this article we start from scratch and will examine what we need to do in order to have webpack create both a javascript and css bundle. We will see all the packages that we need to install from npm as well as their version numbers at the time of the writing of the article. We will also explain the purpose of each entry that we make within our webpack configuration file.
#3 Hot Module Replacement with an Express Server (cont.)
#3 Hot Module Replacement with an Express Server (cont.)
When we are done making the changes contained with this article we will no longer be serving a static html file but instead we will be making use of the templating ability of pug. We will also finally have hot module replacement working in the case where we have multiple entry points instead of just one.
#2 Hot Module Replacement with an Express Server
#2 Hot Module Replacement with an Express Server
By the time we are done with this article we will have a basic express server up and running and serving our index.html file. The reason we want to do this is so that we can see how to get up and running with hot module replacement for both our typescript and scss changes.
#1 Quick Start
#1 Quick Start
In this article we will create the minimal Webpack configuration file that we need in order to begin developing an application using Typescript, Pug (formerly known as Jade) and SCSS. We will use Webpack to transpile our source files to file types the browser can understand, namely Javascript, HTML, and CSS, and create bundles that can be served to our pages which will result in drastically reducing the number of HTTP calls our pages need to make to the server.