Welcome to Part 5 of this review of the Pluralsight course Webpack Fundamentals by Joe Eames.

Joe has worked both full and part time as a technical teacher for over ten years.

He is a frequent blogger and speaker, organizer of ng-conf, the AngularJS conference, and a panelist on the JavaScript Jabber podcast

Also in this series:

Part 1 – Introduction and Basic Builds

Part 2 – Advanced Builds

Part3 – Adding CSS to your Build

Part4 – Adding Images and Fonts to your Build

Part 5 – Webpack Tools

Part 6 – Webpack and Front End Frameworks

Webpack Tools

Using the Connect Middleware

webpack-dev-middleware is middleware for Express JS which allows you to automatically rerun webpack whenever your files change.

If you are new to Express and want to learn more, there are a few courses that you can watch, such as Jonathan Mill’s Building Web Applications with Node.js and Express 4.0.

Joe explains that when your application begins to get complex, you can either uses webpack-dev-middleware, or just go to webpack and run it in watch mode, and run whatever web server you’re developing against.

So webpack-dev-middleware is useful if you are developing your backend services on the Node platform.

In the package.json, we see Joe is using ejs, express and morgan.

We also see that Joe has also created a simple Node server, and he explains this code here.

Demo: Using the Connect Middleware

With all this code explained, we run up the Node server and see that the webpack bundle is valid.

In the browser we point to localhost:8000 and see “Basic Express App” which confirms it is working as expected.

We also learn that there is webpack middleware for other servers such as Koa.

See koa-webpack-dev-middleware.

Creating a Custom Loader

As an example need for creating a custom loader, let’s imagine that we have a big JSON file with lots of comments added to it. Rather than manually removing them all, we can create a loader to do this for us at build time.

We use a few different devDependencies: json-loader, node-libs-browser, strip-json-comments, and of course webpack.

We are going to build on Sindre Sorhus‘s work by wrapping his strip-json-comments tool in a webpack-loader.

Joe creates a strip.js file and requires in strip-json-comments. We see this is super simple here – we just need to return this as an exported function and it should work.

Joe also explains why we usually want to use this.cacheable(), and there are many advantages of using this.

To prove that this works Joe logs the before and after to the console. He also shows what changes are needed in webpack.config to configure our new loader.

Using Plugins

Loaders are pieces that transform files, and Joe explains that Plugins are more like Grunt tasks: they can work on the entire bundle.

For this example, you’ll need to install the timestamp-webpack-plugin, and jquery.

This demo involves adding a plugins section to the webpack.config.js file. Joe explains webpack.ProvidePlugin() and using jquery as the example.

This is very useful because it avoids the need to keep importing (or requiring) the same modules into every file.

Next, there’s a second example: add a banner at the beginning of the build, e.g. for time stamps. This is where we make use of our installed timestamp-webpack-plugin, and we require it into our config file.

We add this into our array of Plugins, and set our filename to filename.json.

We also add the BannerPlugin and supply whatever string argument we which to display here. We see that this text is included at the beginning of our bundle.js file.

Continue to the final part