Name: Configure Prepack with Webpack
Uploaded: 2017-05-04T08:22:42-05:00
Description: 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.

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.

https://app.egghead.io/api/v1/lessons/node-js-configure-prepack-with-webpack/subtitles

Configure Prepack with Webpack

[00:00] 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.

[00:26] 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.

[00:42] 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.

[01:01] 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.

[01:17] 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.

[01:34] 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.

[01:49] 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.

Configure Prepack with Webpack

Share this video with your friends