Organizing your dependencies with Webpack

Webpack is a tool for organizing your code and dependencies. Furthermore, it gives you a way to develop and build with JavaScript files that embed all the dependencies and modules that we pass to them. We'll use this in this recipe to build a small Vue application and bundle everything in a single file.

Getting ready

This recipe doesn't require any particular skill except the use of npm and some knowledge of the command line. You can find out more in the Organizing your dependencies with Webpack recipe in this chapter.

How to do it...

Create a new folder for your recipe and create a package.json file with the following content inside it:

{
 "name": "recipe",
 "version": "1.0.0"
}

This defines an npm project in our folder. You can, of course, use npm init or yarn init if you know what you're doing.

We will install Webpack 2 for this recipe. To add it to your project dependencies, run the following command:

npm install --save-dev webpack@2

The --save-dev option...