We are in the process of upgrading Vue CLI 3 beta to use webpack 4 + Vue Loader 15, so you might want to wait if you are planning to upgrade to Vue CLI 3.
Vue Loader 15 now requires an accompanying webpack plugin to function properly:
Vue Loader 15 现在需要伴随一个 webpack 插件才能正确使用：
``` js
// webpack.config.js
...
...
@@ -27,19 +27,19 @@ module.exports = {
}
```
### Loader Inference
### Loader 推导
Vue Loader 15 now uses a different strategy to infer loaders to use for language blocks.
现在 Vue Loader 15 使用了一个不一样的策略来推导语言块使用的 loader。
Take `<style lang="less">` as an example: in v14 and below, it will attempt to load the block with `less-loader`, and implicitly chains `css-loader` and `vue-style-loader` after it, all using inline loader strings.
In v15, `<style lang="less">` will behave as if it's an actual `*.less` file being loaded. So, in order to process it, you need to provide an explicit rule in your main webpack config:
@@ -53,15 +53,15 @@ In v15, `<style lang="less">` will behave as if it's an actual `*.less` file bei
}
```
The benefit is that this same rule also applies to plain `*.less` imports from JavaScript, and you can configure options for these loaders anyway you want. In v14 and below, if you want to provide custom options to an inferred loader, you'd have to duplicate it under Vue Loader's own `loaders` option. In v15 it is no longer necessary.
v15 also allows using non-serializable options for loaders, which was not possible in previous versions.
v15 也允许为 loader 使用非序列化的选项，这种选项在之前的版本中是无法使用的。
### Template Preprocessing
### 模板预处理
v14 and below uses [consolidate](https://github.com/tj/consolidate.js/) to compile `<template lang="xxx">`. v15 now applies preprocessing for them using webpack loaders instead.
Note that some template loaders such as `pug-loader` exports a compiled templating function instead of plain HTML. In order to pass the correct content to Vue's template compiler, you must use a loader that outputs plain HTML instead. For example, to support `<template lang="pug">`, you can use [pug-plain-loader](https://github.com/yyx990803/pug-plain-loader):
@@ -76,7 +76,7 @@ Note that some template loaders such as `pug-loader` exports a compiled templati
}
```
If you also intend to use it to import `.pug` files as HTML strings in JavaScript, you will need to chain `raw-loader` after the preprocessing loader. Note however adding `raw-loader` would break the usage in Vue components, so you need to have two rules, one of them targeting Vue files using a `resourceQuery`, the other one (fallback) targeting JavaScript imports:
CSS Modules now need to be explicitly configured via `css-loader` options. The `module` attribute on `<style>` tags is still needed for locals injection into the component.
@@ -161,7 +161,7 @@ If you only want to use CSS Modules in some of your Vue components, you can use
}
]
},
// this matches plain <style> or <style scoped>
// 这里匹配普通的 `<style>` 或 `<style scoped>`
{
use:[
'vue-style-loader',
...
...
@@ -172,9 +172,9 @@ If you only want to use CSS Modules in some of your Vue components, you can use
}
```
## CSS Extraction
## CSS 提取
Works the same way as you'd configure it for normal CSS. Example usage with [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin):
@@ -186,7 +186,7 @@ Works the same way as you'd configure it for normal CSS. Example usage with [min
},
{
test:/\.css$/,
// or ExtractTextWebpackPlugin.extract(...)
// 或 `ExtractTextWebpackPlugin.extract(...)`
use:[
MiniCssExtractPlugin.loader,
'css-loader'
...
...
@@ -202,18 +202,18 @@ Works the same way as you'd configure it for normal CSS. Example usage with [min
}
```
## SSR externals
## 服务端渲染的外置
In SSR, we typically use `webpack-node-externals` to exclude npm dependencies from the server build. If you need to import CSS from an npm dependency, the previous solution was using a whitelist like this:
With v15, imports for `<style src="dep/foo.css">` now has resourceQuery strings appended at the end of the request, so you need to update the above to:
