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:

.
├──...

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...

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...

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:

• A short introduction to the flexbox layout system in CSS
• An introduction to JavaScript modules
• Module bundling with Webpack
• Production optimizations to improve performance for users
• Using HTML5 canvas with JavaScript to draw graphics on a website

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.