Enter Your Email Address to Watch This Lesson

Your link to unlock this lesson will be sent to this email address.

Unlock this lesson and all 1083 of the free egghead.io lessons, plus get Node.js content delivered directly to your inbox!



Existing egghead members will not see this. Sign in.

Configure Prepack with Webpack

2:00 Node.js lesson by

Great improvements and optimizations can be made to the output of bundled code. Prepack provides the ability to optimize code at build-time, producing run-time optimizations. In this lesson, we will look at configuring Prepack to use Webpack with the Prepack Webpack Plugin so we can enjoy extremely concise and optimized build scripts within our Webpack project.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Great improvements and optimizations can be made to the output of bundled code. Prepack provides the ability to optimize code at build-time, producing run-time optimizations. In this lesson, we will look at configuring Prepack to use Webpack with the Prepack Webpack Plugin so we can enjoy extremely concise and optimized build scripts within our Webpack project.

Let's start by creating a new project named, "Foo," and installing webpack into it, by typing yarn add webpack. Next, we'll create a pretty simple webpack config file, named webpack.config.js. Here's a pretty simple config, which takes an entry.js file, and outputs it to bundle.js file. Let's save it, then create our entry.js file.

Here's an immediately invoked function that creates a global variable named, "ass," that returns the output of two function calls. Let's run webpack to create our bundle.js file. After packing, open up bundle.js to inspect it.

We can see that we have some webpack bootstrapping done. Near the end of the file, we will see the output of our entry.js file. Note that these function calls will be ran at the time of function invocation at run time. If we look at the file size of our bundle.js file, we can see that it is 3.4 kilobytes.

Let's see how we can improve this output in bundling size with Prepack. Let's install the webpack plugin for prepack by running yarn add prepack webpack plugin. Next, we'll open up the webpack config file and add in a reference to our new plugin.

We'll create a new variable named prepack webpack plugin, and assign it to our reference to the default property over the prepack webpack plugin module. We'll, then, create a new instance of the plugin within the plugin's array.

Let's run webpack again. If we open the bundle.js file now, we can see a single line of optimized output. Note that there are no functions being ran at run time. The output is being optimized at compiled time.

This leads to faster Java script execution at run time. If we exit and look at the file size, we'll also notice our 3.4 kilobytes output has been reduced to 18 bytes.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?