Webpack Loaders, CSS and Style Loaders

Let’s see how to get our styles - css and sass files - bundled in our webpack application package.

Loaders

Webpack by itself only knows javascript, so when we want it to pack any other type of resources…

Handling Images

Usually there are two ways the images are used in a web application — using the <img> tag in the HTML or thru css by setting…

using html-webpack-plugin to generate index.html

Now that we got webpack configured to package and bundle our js code in a single file -app.bundle.js, we need an index.html for our web app with a script tag havingsrc='app.bundle.js'.

Using SASS

Now, lets also add a .scss file and try to bundle it with webpack using sass-loader.

1. Under the ./src/styles folder, add a couple of .scss files as below:

./src/styles/themeColors.scss

Multi-page applications

What if we have a multi-page app? Lets say, we have two html files — index.html and settings.html. index.html uses…

webpack-dev-server (WDS)

So far we have been verifying our changes, that we made to our code locally on the system, by manually opening the…

Installing Webpack

Two options:

1. Install Globally:

npm install -g webpack

When installed globally, webpack can be run using webpack command from the Command prompt/Terminal window.

Multiple Entries

Sometimes you may want to package your javascript files into multiple bundles.

For example, we may want to create two bundles –app.bundle.js for all our application-specific code, and another bundle vendor.bundle.js for all our npm dependencies and include the two bundles…