Skip to content

[en] Webpack -> webpack #1054

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Nov 11, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions docs/en/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,37 +2,37 @@

### 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:
`vue-loader` is a loader for webpack that can transform Vue components written in the following format into a plain JavaScript module:

![screenshot](http://blog.evanyou.me/images/vue-component.png)

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 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;
- 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.
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?
### 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:
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](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.
[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.

![webpack](https://webpack.github.io/assets/what-is-webpack.png)

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.
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:
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`.
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`.
6 changes: 3 additions & 3 deletions docs/en/configurations/advanced.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ To do that, specify the `loaders` option for `vue-loader`:

> Note that `preLoaders` and `postLoaders` are only supported in 10.3.0+

### Webpack 2.x
### webpack 2.x

``` js
module.exports = {
Expand Down Expand Up @@ -49,7 +49,7 @@ module.exports = {
postLoaders: {
html: 'babel-loader'
},

// `excludedPreLoaders` should be regex
excludedPreLoaders: /(eslint-loader)/
}
Expand All @@ -59,7 +59,7 @@ module.exports = {
}
```

### Webpack 1.x
### webpack 1.x

``` js
// webpack.config.js
Expand Down
4 changes: 2 additions & 2 deletions docs/en/configurations/asset-url.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,10 @@ will be compiled into:
createElement('img', { attrs: { src: require('../image.png') }})
```

Because `.png` is not a JavaScript file, you will need to configure Webpack to use [file-loader](https://github.com/webpack/file-loader) or [url-loader](https://github.com/webpack/url-loader) to handle them. The project scaffolded with `vue-cli` has also configured this for you.
Because `.png` is not a JavaScript file, you will need to configure webpack to use [file-loader](https://github.com/webpack/file-loader) or [url-loader](https://github.com/webpack/url-loader) to handle them. The project scaffolded with `vue-cli` has also configured this for you.

The benefits of all this are:

1. `file-loader` allows you to designate where to copy and place the asset file, and how to name it using version hashes for better caching. Moreover, this also means **you can just place images next to your `*.vue` files and use relative paths based on the folder structure instead of worrying about deployment URLs**. With proper config, Webpack will auto-rewrite the file paths into correct URLs in the bundled output.
1. `file-loader` allows you to designate where to copy and place the asset file, and how to name it using version hashes for better caching. Moreover, this also means **you can just place images next to your `*.vue` files and use relative paths based on the folder structure instead of worrying about deployment URLs**. With proper config, webpack will auto-rewrite the file paths into correct URLs in the bundled output.

2. `url-loader` allows you to conditionally inline a file as base-64 data URL if they are smaller than a given threshold. This can reduce the amount of HTTP requests for trivial files. If the file is larger than the threshold, it automatically falls back to `file-loader`.
2 changes: 1 addition & 1 deletion docs/en/configurations/custom-blocks.md
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ comp-a h2 {
#### webpack.config.js

``` js
// Webpack 2.x
// webpack 2.x
var ExtractTextPlugin = require("extract-text-webpack-plugin")

module.exports = {
Expand Down
4 changes: 2 additions & 2 deletions docs/en/configurations/extract-css.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ Note this only extracts `*.vue` files though - CSS imported in JavaScript still

Example config to extract all the processed CSS in all Vue components into a single CSS file:

### Webpack 2.x
### webpack 2.x


``` js
Expand Down Expand Up @@ -70,7 +70,7 @@ module.exports = {
}
```

### Webpack 1.x
### webpack 1.x

``` bash
npm install extract-text-webpack-plugin --save-dev
Expand Down
12 changes: 6 additions & 6 deletions docs/en/configurations/pre-processors.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Using Pre-Processors

In Webpack, all pre-processors need to be applied with a corresponding loader. `vue-loader` allows you to use other Webpack loaders to process a part of a Vue component. It will automatically infer the proper loaders to use from the `lang` attribute of a language block.
In webpack, all pre-processors need to be applied with a corresponding loader. `vue-loader` allows you to use other webpack loaders to process a part of a Vue component. It will automatically infer the proper loaders to use from the `lang` attribute of a language block.

### CSS

Expand All @@ -20,7 +20,7 @@ Under the hood, the text content inside the `<style>` tag will be first compiled

#### sass-loader caveat

Contrary to what its name indicates, [*sass*-loader](https://github.com/jtangelder/sass-loader) parses *SCSS* syntax by default. If you actually want to use the indented *SASS* syntax, you have to configure vue-loader's options for sass-loader accordingly.
Contrary to what its name indicates, [*sass*-loader](https://github.com/jtangelder/sass-loader) parses *SCSS* syntax by default. If you actually want to use the indented *SASS* syntax, you have to configure vue-loader's options for sass-loader accordingly.

```javascript
{
Expand Down Expand Up @@ -69,7 +69,7 @@ scss: generateLoaders('sass').concat(
),
```

It is recommended to only include variables, mixins, etc. in this file, to prevent duplicated css in your final, compiled files.
It is recommended to only include variables, mixins, etc. in this file, to prevent duplicated css in your final, compiled files.

### JavaScript

Expand All @@ -87,7 +87,7 @@ npm install coffee-loader --save-dev

### Templates

Processing templates is a little different, because most Webpack template loaders such as `pug-loader` return a template function instead of a compiled HTML string. Instead of using `pug-loader`, we can just install the original `pug`:
Processing templates is a little different, because most webpack template loaders such as `pug-loader` return a template function instead of a compiled HTML string. Instead of using `pug-loader`, we can just install the original `pug`:

``` bash
npm install pug --save-dev
Expand All @@ -104,12 +104,12 @@ div

### Inline Loader Requests

You can use [Webpack loader requests](https://webpack.github.io/docs/loaders.html#introduction) in the `lang` attribute:
You can use [webpack loader requests](https://webpack.github.io/docs/loaders.html#introduction) in the `lang` attribute:

``` html
<style lang="sass?outputStyle=expanded">
/* use sass here with expanded output */
</style>
```

However, note this makes your Vue component Webpack-specific and not compatible with Browserify and [vueify](https://github.com/vuejs/vueify). **If you intend to ship your Vue component as a reusable 3rd-party component, avoid using this syntax.**
However, note this makes your Vue component webpack-specific and not compatible with Browserify and [vueify](https://github.com/vuejs/vueify). **If you intend to ship your Vue component as a reusable 3rd-party component, avoid using this syntax.**
2 changes: 1 addition & 1 deletion docs/en/features/es2015.md
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ You can also customize the features supported in templates using the [`buble` op

### Transpiling Normal `.js` Files

Since `vue-loader` only processes `*.vue` files, you'd need to tell Webpack to process normal `*.js` files with `babel-loader` or `buble-loader` in the Webpack config file. The project scaffolded with `vue-cli` already does it for you.
Since `vue-loader` only processes `*.vue` files, you'd need to tell webpack to process normal `*.js` files with `babel-loader` or `buble-loader` in the webpack config file. The project scaffolded with `vue-cli` already does it for you.

### Configuring Babel with `.babelrc`

Expand Down
8 changes: 4 additions & 4 deletions docs/en/features/hot-reload.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,10 @@ Advanced users may want to check out [vue-hot-reload-api](https://github.com/vue

Hot Reload is always enabled except following situations:

* Webpack `target` is `node` (SSR)
* Webpack minifies the code
* webpack `target` is `node` (SSR)
* webpack minifies the code
* `process.env.NODE_ENV === 'production'`

You may use `hotReload: false` option to disable the Hot Reload explicitly:

``` js
Expand All @@ -42,4 +42,4 @@ module: {
}
]
}
```
```
4 changes: 2 additions & 2 deletions docs/en/features/postcss.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ Using a config file allows you to share the same config between your normal CSS

Alternatively, you can specify postcss config specifically for `*.vue` files using the `postcss` option for `vue-loader`.

Example usage in Webpack 1.x:
Example usage in webpack 1.x:

``` js
// webpack.config.js
Expand All @@ -29,7 +29,7 @@ module.exports = {
}
```

For Webpack 2.x:
For webpack 2.x:

``` js
// webpack.config.js
Expand Down
18 changes: 9 additions & 9 deletions docs/en/options.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
# Options Reference

## Usage Difference Between Webpack 1 & 2
## Usage Difference Between webpack 1 & 2

For Webpack 2: pass the options directly to the loader rule.
For webpack 2: pass the options directly to the loader rule.

``` js
module.exports = {
Expand All @@ -21,7 +21,7 @@ module.exports = {
}
```

For Webpack 1.x: add a root `vue` block in your Webpack config.
For webpack 1.x: add a root `vue` block in your webpack config.

``` js
module.exports = {
Expand All @@ -36,7 +36,7 @@ module.exports = {

- type: `{ [lang: string]: string }`

An object specifying Webpack loaders to overwrite the default loaders used for language blocks inside `*.vue` files. The key corresponds to the `lang` attribute for language blocks, if specified. The default `lang` for each type is:
An object specifying webpack loaders to overwrite the default loaders used for language blocks inside `*.vue` files. The key corresponds to the `lang` attribute for language blocks, if specified. The default `lang` for each type is:

- `<template>`: `html`
- `<script>`: `js`
Expand All @@ -45,7 +45,7 @@ module.exports = {
For example, to use `babel-loader` and `eslint-loader` to process all `<script>` blocks:

``` js
// Webpack 2.x config
// webpack 2.x config
module: {
rules: [
{
Expand Down Expand Up @@ -144,7 +144,7 @@ module.exports = {

Whether to enable source maps for CSS. Disabling this can avoid some relative path related bugs in `css-loader` and make the build a bit faster.

Note this is automatically set to `false` if the `devtool` option is not present in the main Webpack config.
Note this is automatically set to `false` if the `devtool` option is not present in the main webpack config.

### esModule

Expand Down Expand Up @@ -183,7 +183,7 @@ module.exports = {
- type: `{ [tag: string]: string | Array<string> }`
- default: `{ img: 'src', image: 'xlink:href' }`

During template compilation, the compiler can transform certain attributes, such as `src` URLs, into `require` calls, so that the target asset can be handled by Webpack. The default config transforms the `src` attribute on `<img>` tags and `xlink:href` attribute on `<image>` tags of SVG.
During template compilation, the compiler can transform certain attributes, such as `src` URLs, into `require` calls, so that the target asset can be handled by webpack. The default config transforms the `src` attribute on `<img>` tags and `xlink:href` attribute on `<image>` tags of SVG.

### buble

Expand Down Expand Up @@ -319,5 +319,5 @@ Whether generate source maps with cache busting by appending a hash query to the
- default: `true` in development mode, `false` in production mode or when the webpack config has `target: 'node'`.
- allowed value: `false` (`true` will not force Hot Reload neither in production mode nor when `target: 'node'`)

Whether to use Webpack [Hot Module Replacement](https://webpack.js.org/concepts/hot-module-replacement/) to apply changes in the browser **without reloading the page**.
Use this option (value `false`) to disable the Hot Reload feature in development mode.
Whether to use webpack [Hot Module Replacement](https://webpack.js.org/concepts/hot-module-replacement/) to apply changes in the browser **without reloading the page**.
Use this option (value `false`) to disable the Hot Reload feature in development mode.
4 changes: 2 additions & 2 deletions docs/en/start/spec.md
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ More details can be found in [Using Pre-Processors](../configurations/pre-proces

- Each `*.vue` file can contain at most one `<script>` block at a time.

- The script is executed in a CommonJS like environment (just like a normal `.js` module bundled via Webpack), which means you can `require()` other dependencies. And with ES2015 support, you can also use the `import` and `export` syntax.
- The script is executed in a CommonJS like environment (just like a normal `.js` module bundled via webpack), which means you can `require()` other dependencies. And with ES2015 support, you can also use the `import` and `export` syntax.

- The script must export a Vue.js component options object. Exporting an extended constructor created by `Vue.extend()` is also supported, but a plain object is preferred.

Expand All @@ -68,7 +68,7 @@ More details can be found in [Using Pre-Processors](../configurations/pre-proces

- A `<style>` tag can have `scoped` or `module` attributes (see [Scoped CSS](../features/scoped-css.md) and [CSS Modules](../features/css-modules.md)) to help encapsulate the styles to the current component. Multiple `<style>` tags with different encapsulation modes can be mixed in the same component.

- By default, contents will be extracted and dynamically inserted into the document's `<head>` as an actual `<style>` tag using `style-loader`. It's also possible to [configure Webpack so that all styles in all components are extracted into a single CSS file](../configurations/extract-css.md).
- By default, contents will be extracted and dynamically inserted into the document's `<head>` as an actual `<style>` tag using `style-loader`. It's also possible to [configure webpack so that all styles in all components are extracted into a single CSS file](../configurations/extract-css.md).

### Custom Blocks

Expand Down
6 changes: 3 additions & 3 deletions docs/en/workflow/linting.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,9 @@ module.exports = {
}
```

Note that Webpack loader chains are applied **right-first**. Make sure to apply `eslint` before `vue` so we are linting the pre-compile source code.
Note that webpack loader chains are applied **right-first**. Make sure to apply `eslint` before `vue` so we are linting the pre-compile source code.

One thing we need to consider is using third party `*.vue` components shipped in NPM packages. In such case, we want to use `vue-loader` to process the third party component, but do not want to lint it. We can separate the linting into Webpack's [preLoaders](https://webpack.github.io/docs/loaders.html#loader-order):
One thing we need to consider is using third party `*.vue` components shipped in NPM packages. In such case, we want to use `vue-loader` to process the third party component, but do not want to lint it. We can separate the linting into webpack's [preLoaders](https://webpack.github.io/docs/loaders.html#loader-order):

``` js
// webpack.config.js
Expand All @@ -67,7 +67,7 @@ module.exports = {
}
```

For Webpack 2.x:
For webpack 2.x:

``` js
// webpack.config.js
Expand Down
4 changes: 2 additions & 2 deletions docs/en/workflow/production.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ module.exports = {
warnings: false
}
}),
// Webpack 1 only - optimize module ids by occurrence count
// webpack 1 only - optimize module ids by occurrence count
new webpack.optimize.OccurrenceOrderPlugin()
]
}
Expand All @@ -34,6 +34,6 @@ Obviously we don't want to use this config during development, so there are seve

1. Dynamically build up the configuration object based on an environment variable;

2. Or, use two separate Webpack config files, one for development and one for production. And maybe share some common options between them in a third file, as shown in [vue-hackernews-2.0](https://github.com/vuejs/vue-hackernews-2.0).
2. Or, use two separate webpack config files, one for development and one for production. And maybe share some common options between them in a third file, as shown in [vue-hackernews-2.0](https://github.com/vuejs/vue-hackernews-2.0).

It's really up to you as long as it achieves the goal.
Loading