Vue Loader 是一个Webpack的 loader，它支持 .vue 单文件组件的各个、
所有语言块支持 src 导入，导入路径遵循和 webpack 模块请求相同的路径解析规则。当 Vue Loader 编译单文件组件中的 块时也会将所有遇到的资源 URL 转换为 webpack 模块请求。
路径解析规则：
- 绝对路径原样保存；
- 以“.”开头，则看做相对模块请求，并根据文件系统上的目录结构解析；
- 以“～”开头，则将其后的作为模块请求，可以引入 node_modules 中的资源；
- 以“@”开头，则其后的内容也被解释为模块请求，“@”在 vue-cli 创建的项目中默认指向"/src"
二、Webpack 配置 vue-loader
Vue Loader 和 Webpack 结合，使我们可以使用 .vue 文件来开发 Vue 项目。Vue Loader 的配置和其它的 loader 不太一样。除了通过 rules 规则将 vue-loader 应用到 .vue 的文件上之外，还需要添加 Vue Loader Plugin 插件：
// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
module: {
rules: [
// ... 其它规则
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
},
plugins: [
new VueLoaderPlugin()
]
}Vue Loader Plugin 的职责是将 .vue 文件中的语言块应用在相应的 rules 上。例如样式匹配 /\.css$/的规则，那么它会应用到 .vue 文件里的
编译后的 style 样式表为：
article h1 {color: #333}
article p {color: #F90} 除了 Vue 默认使用 PostCSS 处理 css，还可以使用 sass，less，stylus 外， 对于 js 部分 Vue 默认使用 babel 处理，还可以用 coffee、typescript 等，具体的 loader & webpack 配置方式见 Vue Loader 使用预处理器
四、CSS Style 的特殊用法
4.1 CSS Scoped 局部作用域
当
通过使用 PostCSS 进行作用域重写，处理后如下：
hi
当使用 css scoped 时需要注意以下几点：
- 使用 scope 作用域不能弃用 class 或 id 等!
考虑到浏览器渲染各种 CSS 选择器的方式，当使用 scoped 时，选择属性选择器如 p { color: red } 在作用域中会慢很多倍（即当与属性选择器组合时）。如果你使用 class 或者 id 代替，比如 .example { color: red }，这样几乎没有性能影响
- 子组件的根节点将受父组件 css scoped 作用域影响
使用 scope 作用域时，父组件的样式不会泄漏到子组件中。 但子组件的根节点将受父级作用域 CSS 和子级作用域 CSS 的影响。 这是为了父级可以设置子组件根元素的样式以进行布局。
-
父组件可以使用‘ >>> ’或‘ /deep/ ’ 这种深度选择器作用于子组件
编译为
.a[data-v-f3f3eg9] .b { /* ... */ } - 通过 v-html 动态创建的 DOM 内容不受 scoped 样式影响，但可以使用深度选择器进行样式改变
在 template 中只包含一个外层节点，不能多个节点并列，这个设计思路遵循父组件可以操作子节点的一个根节点，即使在 CSS 局部作用域下依然有效
4.2 CSS Modules 模块模式
一个 CSS Module 其实就是一个 CSS 类型的文件，用于模块化和组合 CSS 的系统，在
This should be red
Am I red?
JS 也可以通过 this.$style访问 CSS Modules：
上述代码中的this.$style.red是一个基于文件名和类名生成的标识符。当从 JS 模块导入 CSS 模块时，它会导出包含从本地名称到全局名称的所有映射的一个对象
在 CSS Module 中，所有的 url 和 @import 都是被看成模块依赖，例如 url(./image.png) 会被转换为 require(‘./image.png’)，请求的资源可以是在
node_modules中。
4.3 CSS 提取
一些插件可以将 CSS 提取到单独的文件中，为每个包含 CSS 的 JS 文件创建一个 CSS 文件，以便按需加载 CSS 和源代码。
webpack4 使用 mini-css-extract-plugin 插件，配置如下：
npm install -D mini-css-extract-plugin只在生产环境下使用 CSS 提取，便于在开发环境下进行热重载。
// webpack.config.js
var MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: process.env.NODE_ENV === 'development',
},
},
'css-loader'
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css', // 类似于webpackOptions.output中的相同选项
chunkFilename: '[id].css'
})
]
}更多配置参考 github mini-css-extract-plugin
五、自定义语言块
除了默认的等节点，还可以加自定义节点，并在webpack 配置的 loader 处理自定义语言块；
可以给节点加 lang 属性，此时节点 rule 匹配 lang 的扩展；如果没有标记 lang，则自定义节点的 name 和 rule 需要在 webpack 中声明。
举例自定义一个语言块
// myblock-loader.js
module.exports = function (source, map) {
this.callback(
null,
`export default function (Component) {
Component.options.__myblock = ${
JSON.stringify(source)
}
}`,
map
)
}配置到 webpack
// webpack.config.js -> module.rules
rules: [
{
resourceQuery: /blockType=docs/,
loader: require.resolve('./docs-loader.js')
}
]在组件中使用：
Hello
This is the documentation for component B.
组件间复用：
{{ myblock }}
更多内容参考 Vue Loader 官网