Organize + Automate + Deploy = Webpack Chapter 16Organizing 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@2The --save-dev option means that we will not ship the code for Webpack in our final
product, but we will use it only for development purposes.
Create a new app directory and an App.vue file inside it.