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.

• Introduction to SharePoint Framework (SPFx) – Zero to Hero Series – Part 1
• Introduction to SharePoint Framework (SPFx) – Zero to Hero Series – Part 2

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?

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.



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.



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.

 

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



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.



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.



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.

Summary

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