脚本宝典收集整理的这篇文章主要介绍了【Vue】.vue 单文件组件与 Webpack vue-loader 配置,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
Vue Loader 是一个Webpack
的 loader,它支持 .vue 单文件组件的各个<template>
、<script>
和 <style>
以及自定义语言块使用非默认语言,比如 style 使用 less/sass 语言,并支持组件中 css scoped 局部作用域和 css module 等。
如果在项目开始阶段为前端工程化复杂的配置而困惑,不妨试试使用 IDE 自动构建,推荐使用 WebStorm 新建 Vue 项目,参考 WebStorm 2018 的破解、汉化与设置使用
.vue 文件是一个自定义的文件类型,用类 HTML 语法描述一个 Vue 组件。每个 .vue 文件包含三种类型的顶级语言块 <template>
、<script>
和 <style>
,还允许添加可选的自定义块:
<template>
模板块一个SFC中最多一个< template >块;其内容将被提取为字符串传递给 vue-template-compiler ,然后 webpack 将其编译为 js 渲染函数,并最终注入到从<script>
导出的组件中;
<script>
脚本块一个SFC最多一个<script>
块,会作为一个模块封装。它的默认导出应该是一个 Vue.js 的组件选项对象,也可以导出由 Vue.extend()
创建的扩展对象。
<style>
样式块一个 .vue 文件可以包含多个 <style>
标签,标签可以有 scoped
或者 module
属性。
vue-loader 将会使用块名来查找对应的 loader 进行处理。
一个 .Vue 文件示例如下:
<template src="./template.html">
<div class="example">{{ msg }}</div>
</template>
<script src="./script.js">
export default {
data () {
return {
msg: 'Hello world!'
}
}
}
</script>
<style scoped src="./style.css">
.example {
color: red;
}
</style>
<custom1>
This could be e.g. documentation for the component.
</custom1>
所有语言块支持 src 导入,导入路径遵循和 webpack 模块请求相同的路径解析规则。当 Vue Loader 编译单文件组件中的 <template>
块时也会将所有遇到的资源 URL 转换为 webpack 模块请求。
路径解析规则:
- 绝对路径原样保存;
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>
块,匹配 /.js$/
的规则会应用到 .vue 文件里的 <script>
块。
所以修改上诉配置示例,使其更加完整:
<script>
export default {
created () {
console.log(this.$style.red) // "red_1VyoJ-uZ"
}
}
</script>
上述代码中的this.$style.red
是一个基于文件名和类名生成的标识符。当从 JS 模块导入 CSS 模块时,它会导出包含从本地名称到全局名称的所有映射的一个对象
在 CSS Module 中,所有的 url 和 @import 都是被看成模块依赖,例如 url(./image.png) 会被转换为 require(‘./image.png’),请求的资源可以是在node_modules
中。
一些插件可以将 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
除了默认的<template>
等节点,还可以加自定义节点,并在webpack 配置的 loader 处理自定义语言块;
可以给节点加 lang 属性,此时节点 rule 匹配 lang 的扩展;如果没有标记 lang,则自定义节点的 name 和 rule 需要在 webpack 中声明。
举例自定义一个语言块 <myblock>
,首先需要自定义 loader 将自定义块注入到组件中,自定义的 myblock-loader 如下:
// 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')
}
]
在组件中使用:
<!-- ComponentB.vue -->
<template>
<div>Hello</div>
</template>
<myblock>
This is the documentation for component B.
</myblock>
组件间复用:
<!-- ComponentA.vue -->
<template>
<div>
<ComponentB/>
<p>{{ myblock }}</p>
</div>
</template>
<script>
import ComponentB from './ComponentB.vue';
export default {
components: { ComponentB },
data () {
return {
myblock: ComponentB.__myblock
}
}
}
</script>
更多内容参考 Vue Loader 官网
以上是脚本宝典为你收集整理的【Vue】.vue 单文件组件与 Webpack vue-loader 配置全部内容,希望文章能够帮你解决【Vue】.vue 单文件组件与 Webpack vue-loader 配置所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。