Introduction To SharePoint Framework (SPFx) - Zero To Hero Series - Part Three

This is the third article in SharePoint Framework (SPFx) – Zero to Hero Series. I will recommend reading the first two articles before going through this article.

In this article, we will look more into how to use WebPack. Also, we will get an overview of Yeoman.

In the second article of this series, we saw how to install a webpack. In this article, we will see how to bundle using webpack. Therefore, I am going to create a command called bundle in package.json. The first question comes to our mind is – Where it is going to create the bundle file?

SharePoint Framework

Let’s create a new file – webpack.config.js. So, basically, to keep things simple, the idea here is that we need to return an object in this file, which the webpack will use for its configuration; and we need to specify an entry point called index.js and an output in this file.

SharePoint Framework

Now, we will run the command npm run bundle in the console, as shown below. It will bundle the webpack. In addition, it has bundled some local files too, as shown below.

SharePoint Framework

Now, since all our files have been bundled, if we write the command node bundle.js, it will give us the same result as given by the command node index.js, as explained earlier.

SharePoint Framework 

Introduction to Yeoman

Yeoman is a Node package that allows generating project structures. Yeoman has a whole registry, and we can use the registry to find new templates, install templates, and can generate the code based on those.

So, let’s first install Yeoman using the command -

npm install –g yo

SharePoint Framework

Once yo (Yeoman) installs successfully, we can install Yeoman templates. There is a very good template called “Electron”. So, we will run the command -
 
npm install –g yo generator-electron.
 
All the templates start with the word generator. We can check Yeoman’s website where multiple templates are available.

SharePoint Framework

Now that Electron has been installed, using it is very simple. We will write the command yo electron, and it will ask for some basic details.

SharePoint Framework

Once you hit Enter, it will download all the necessary things for my Electron project. Once downloaded, if you check the package.json file, it will have the Electron project's necessary details.

SharePoint Framework

Summary

In this article, we saw how to use webpack and Yeoman.

Up Next
    Ebook Download
    View all
    Learn
    View all