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
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
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
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
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
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
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
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.)
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
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
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.