16

Organize + Automate + Deploy

= Webpack

In this chapter, we will talk about the following topics:

Extracting logic from your components to keep the code tidy

Bundling your component with Webpack

Organizing your dependencies with Webpack

Using external components in your Webpack project

Developing with continuous feedback with hot reloading

Using Babel to compile from ES6

Running a code linter while developing

Using only one command to build both a minified and a development .js file

Releasing your components to the public

Introduction

Webpack coupled with npm is a very powerful tool. In essence, it's just a bundler that takes

some files along with their dependencies and bundles everything into one or more

consumable files. It's now in its second version and represents much more than before,
especially for Vue developers.

Webpack will enable you to write components conveniently isolated in single files and
shippable on command. It will enable you to use different JavaScript standards, such

as ES6, but also other languages altogether, all thanks to loaders, a concept that will recur

in the following recipes.