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.
Also in this series:
Part 5 – Webpack Tools
Using the Connect Middleware
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.
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.
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 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.
Loaders are pieces that transform files, and Joe explains that Plugins are more like Grunt tasks: they can work on the entire bundle.
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.