|
2 | 2 |
|
3 | 3 | ### What is `vue-loader`? |
4 | 4 |
|
5 | | -`vue-loader` is a loader for Webpack that can transform Vue components written in the following format into a plain JavaScript module: |
| 5 | +`vue-loader` is a loader for webpack that can transform Vue components written in the following format into a plain JavaScript module: |
6 | 6 |
|
7 | 7 |  |
8 | 8 |
|
9 | 9 | There are many cool features provided by `vue-loader`: |
10 | 10 |
|
11 | 11 | - ES2015 enabled by default; |
12 | | -- Allows using other Webpack loaders for each part of a Vue component, for example SASS for `<style>` and Jade for `<template>`; |
| 12 | +- Allows using other webpack loaders for each part of a Vue component, for example SASS for `<style>` and Jade for `<template>`; |
13 | 13 | - Allows custom sections in a .vue file that can have custom loader chains applied to them |
14 | | -- Treat static assets referenced in `<style>` and `<template>` as module dependencies and handle them with Webpack loaders; |
| 14 | +- Treat static assets referenced in `<style>` and `<template>` as module dependencies and handle them with webpack loaders; |
15 | 15 | - Can simulate scoped CSS for each component; |
16 | 16 | - Supports component hot-reloading during development. |
17 | 17 |
|
18 | | -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. |
| 18 | +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. |
19 | 19 |
|
20 | | -### What is Webpack? |
| 20 | +### What is webpack? |
21 | 21 |
|
22 | | -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: |
| 22 | +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: |
23 | 23 |
|
24 | | -[Webpack](https://webpack.github.io/) 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. |
| 24 | +[webpack](https://webpack.github.io/) 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. |
25 | 25 |
|
26 | 26 |  |
27 | 27 |
|
28 | | -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. |
| 28 | +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. |
29 | 29 |
|
30 | | -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: |
| 30 | +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: |
31 | 31 |
|
32 | 32 | - Transpile ES2015, CoffeeScript or TypeScript modules into plain ES5 CommonJS modules; |
33 | 33 | - Optionally you can pipe the source code through a linter before doing the compilation; |
34 | 34 | - Transpile Jade templates into plain HTML and inline it as a JavaScript string; |
35 | 35 | - Transpile SASS files into plain CSS, then convert it into a JavaScript snippet that insert the resulting CSS as a `<style>` tag; |
36 | 36 | - 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. |
37 | 37 |
|
38 | | -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`. |
| 38 | +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`. |
0 commit comments