Introduction

What is Vue Loader?

vue-loader is a loader for webpack that can transform Vue components written in the following format into a plain JavaScript module:

There are many cool features provided by vue-loader:

• ES2015 enabled by default;
• Allows using other webpack loaders for each part of a Vue component, for example Sass for <style> and Jade for <template>;
• Allows custom sections in a .vue file that can have custom loader chains applied to them
• Treat static assets referenced in <style> and <template> as module dependencies and handle them with webpack loaders;
• Can simulate scoped CSS for each component;
• Supports component hot-reloading during development.

In a nutshell, the combination of webpack and vue-loader gives you a modern, flexible and extremely powerful front-end workflow for authoring Vue.js applications.

What is webpack?

If you are already familiar with webpack, feel free to skip the following explanation. But for those of you who are new to webpack, here's a quick intro:

webpack is a module bundler. It takes a bunch of files, treating each as a module, figuring out the dependencies between them, and bundle them into static assets that are ready for deployment.

For a basic example, imagine we have a bunch of CommonJS modules. They cannot run directly inside the browser, so we need to "bundle" them into a single file that can be included via a <script> tag. webpack can follow the dependencies of the require() calls and do that for us.

But webpack can do more than that. With "loaders", we can teach webpack to transform all types of files in any way we want before outputting the final bundle. Some examples include:

• Transpile ES2015, CoffeeScript or TypeScript modules into plain ES5 CommonJS modules;
• Optionally you can pipe the source code through a linter before doing the compilation;
• Transpile Jade templates into plain HTML and inline it as a JavaScript string;
• Transpile Sass files into plain CSS, then convert it into a JavaScript snippet that insert the resulting CSS as a <style> tag;
• Process an image file referenced in HTML or CSS, moved it to the desired destination based on the path configurations, and naming it using its md5 hash.

webpack is so powerful that when you understand how it works, it can dramatically improve your front-end workflow. Its primary drawback is its verbose and complex configuration; but with this guide you should be able to find solutions for most common issues when using webpack with Vue.js and vue-loader.