Looking from the vantage point of webpack, here is the chronological list of approaches, techniques, best practices, and patterns that were added to the JS ecosystem, which led to the current state of things:

• The script tag as the answer to adding interactivity to web pages
• Immediately invoked function expressions as the answer to modularizing libraries and avoiding code collisions
• The problem with IIFEs
• Sharing third-party libraries in a team environment with NPM
• JS task runners and NPM scripts
• Modules in JS

Let's look at each one of these solutions in more detail.

Initially, adding JS to your web page meant that you would need to add some script tags directly in your...

Webpack is a module bundler for the web. Some people also refer to it as an asset compiler for web applications.

According to webpack's GitHub page:

Earlier in this chapter, in the section titled Working with modules in Node.js, we barely scratched the surface of how modules get exported and required in Node apps. What we did not mention is that there are all kinds of different module syntaxes that we can use. As already mentioned, Node.js works with the CommonJS module syntax. Besides CommonJS, there is also Asynchronous Module Definition (AMD). Alongside AMD, you can use ESM modules. With ESM modules, the syntax is a bit different from what we saw earlier.

Let's rewrite...

In this section, we'll build a new project with NPM, then add webpack to it, and finally add a Vue single file component to it.

First, let's make a new directory by taking the following steps. We'll call our project npm-vue-webpack:

1. Open Git Bash and add a new folder as follows:

mkdir npm-vue-webpack && cd $_

2. Initialize npm as follows:

npm init -y

3. Next, install Vue and webpack into our new project as follows:

npm install vue webpack webpack-cli --save-dev --verbose

Once the NPM installation is complete, we can verify the folders and the contents of package.json as we did earlier in the chapter.

4. Next, add the source and output folders our project will use as follows:

mkdir dist src

5. Open our new project in VS Code as follows:

code .

Now, we can add two new files right from the VS Code editor...

HMR has become a sort of a buzzword in the past couple of years. What's the big deal? In this section, we'll discuss how HMR works.

To do that, we'll build another default simple app, just like we did in Chapter 1, Introducing Vue CLI 3, as follows:

vue create -d second-default-app

After a while, once it's done, we'll go into our app's directory as follows:

cd second-default-app

Let's open the project's folder in VS Code as follows:

code .

Now, we can see the entire contents of our second-default-project.

Now, we can serve the app as follows:

npm run serve

Of course, our app is now serving in our browser.

Let's look at HMR updates happening in real time.

In this chapter we discussed the evolution of the JS language and its ecosystem, and how this evolution lead to the appearance of module bundlers. We also looked at webpack, the module bundler of choice of Vue CLI 3.

We looked at how to plug in a very basic Vue-powered app, running on single file Vue templates. Alongside this mini-project, we also looked at a number of important webpack concepts. We finished the chapter by observing HMR on a Vue project.

Now that we know the very basics of how webpack works, in the chapters that follow, we'll discuss some other related technologies and we'll build on our knowledge of webpack and Vue CLI 3. The next topic we'll be closely examining is Babel.