JavaScript by Example

Create a new folder for our Meme Creator application. Open up the folder in VSCode or any other text editor you are using for this project. Navigate to the folder in your terminal and run npm init. Just as we did in the previous chapter, fill in all the details asked for in the terminal, then hit Enter on Windows or return on Mac, and you will have your package.json file in the project root.

From the code files you downloaded for this book, open up the starter files folder for Chapter 2. You will see an index.html file. Copy and paste it into your new project folder. That's all for the starter files provided with this chapter, because there is not going to be a default CSS file. We are going to build the UI from scratch!

Create the files and folders we are going to use in this chapter. The folder structure should be as follows:

.
├── index.html
├── package.json
└── src
    ├── css
    │   └── styles.css
    └── js
         ├── general.js
         └── memes.js

For now, leave...

It's finally time to set up our fully-featured development environment. You'll probably be wondering what Webpack is and what's it got to do with a development environment. Or perhaps, you are familiar with tools such as gulp or grunt and are wondering how Webpack is different from them.

If you have used gulp or grunt before, they are task runners. They execute a specific set of tasks to compile, transform, and minify your code. There is also a tool called Browserify, which lets you use require() in browsers. Usually, a development environment with gulp/grunt involves executing various commands using different sets of tools, such as Babel, Browserify, and so on, in a specific order to generate our desired output code. But Webpack is different. Unlike task runners, Webpack doesn't run a set of commands to build the code. Instead, it acts as a module bundler.

Webpack goes through your JavaScript code and looks for import, require, and so on to find files dependent on it...

We just built a nice little development environment using Webpack. It's time to put it into action. If you have done the production optimizations, make sure you have created the .env file in the project root folder and your NODE_ENV environment variable inside that file is not production. Simply set the value of NODE_ENV=dev while we are working on the application. We are going to build the Meme Creator now. Make sure you have included the memes.js and memes.css files (if you used ExtractTextPlugin) from the dist directory in your index.html file.

Open up the memes.js file in your text editor and keep webpack-dev-server running (npm run watch). Our first step is to create a reference to all the required DOM elements in variables in our class. We can then use the references to modify the elements later, from inside the class. Also, whenever we are creating a reference to DOM elements, it is good to have the variable names start with $. This way, we can easily know...

Good work! You have built a Meme Creator that will now convert your images into memes. More importantly, you have a great development environment that will make app development with JavaScript even easier. Let's review the things you have learned in this chapter:

We learned quite a lot in this chapter. Especially about Webpack. It might seem a little overwhelming, but it is very useful in the long run. In the next chapter, we are going to see how to write modular code and reuse it across the application, which is now possible due to Webpack.