阅读 1192

Webpack3之Vue-loader配置简述

VUE-LOADER配置简述

前注:

文档全文请查看 根目录的文档说明

如果可以,请给本项目加【Star】和【Fork】持续关注。

有疑义请点击这里,发【Issues】。

DEMO地址

0、使用说明

首先你得会用 Vue.js,不然可能对本文部分内容无法理解

安装:

npm install
复制代码

运行:

// 开发模式(推荐使用这个)
npm run dev

// 普通模式(需要执行后手动刷新页面)
npm run test
复制代码

单独安装 Vue-loader:

  1. 首先要有 Vue;
  2. 其次解析 vue 文件还要 vue-template-compiler
  3. 解析 css 内容当然还要 css-loader,以及配套的 style-loader
npm i --save vue
npm i --save vue-loader
npm i --save vue-template-compiler
npm i --save css-loader
npm i --save style-loader
复制代码

通过以上安装,至少可以开始使用了

1、概述

简单来说,vue-loader 就是处理 .vue 文件的。

本文除了涉及到 webpack 中 vue-loader 的使用方法外,还包括 .vue 文件的一些独有使用方法。

但单独一个 vue-loader 并不能解决问题,因此还需要一些其他的东西。

【1】 vue-template-compiler:关于他的作用,根据 readme.md 文件中所介绍的:

This package can be used to pre-compile Vue 2.0 templates into render functions to avoid runtime-compilation overhead and CSP restrictions. You will only need it if you are writing build tools with very specific needs. In most cases you should be using vue-loader or vueify instead, both of which use this package internally.

大致意思就是说,这个用于把 Vue 的模板文件(应该指.vue)预编译为渲染函数,避免运行时再编译带来的性能开销。

就是说 .vue 文件,在 js 执行时再拆开,然后使用是会消耗很多性能的。

一般情况下,不需要单独用他,用 vue-loader 就行了(但是你却需要单独安装他,安装 vue-loader 时是不带这个的)。

【2】 解析 css 内容当然还要 css-loader,以及配套的 style-loader

根据你的需要,可能还需要更多,但一般情况下,只需要你单独安装好这 2 个就行了(安装vue-laoder不会附带安装这 2 个)。

2、配置

2.1、默认配置

默认配置下,vue-loader只具备基础功能:

【1】.vue 文件拆解:

  • .vue 文件拆解成可用的三部分,然后扔到打包后的 .js 文件;

【2】HMR功能:

  • 默认支持 HMR 功能(DEMO里已预置,执行 npm run dev 可以通过使用);
  • 如果对规则感兴趣的,请参照官网说明:热重载 vue-loader

【3】css局部作用域:

  • 支持组件的 css 使用局部作用域,在 style 标签添加 scoped 即可。
  • 例如:<style scoped></style>,这样的话,该组件内的样式只会对该组件生效(原理是给对应的组件加指定属性名,然后 css 选择器里也加上属性选择器);
  • 支持在组件使用 scoped 属性的情况下,让某些样式影响子元素。方法是使用 /deep/>>> 关键字,该关键字前的选择器,会加局部作用域;该关键字后面的选择器,不会加局部作用域。例如.app /deep/ .child 会被编译为:··.app[data-v-04c2046b] .child··

【4】CSS Modules

  • 简单来说,就是可以将 <style></style> 标签内的东西,加了 module 属性后,可以直接在 vue 组件后,获取重命名后的类名。
  • 可以用作模拟 css 作用域的解决方案。
  • 详细说明见本文【3.1、CSS Modules】

需要额外配置才有的功能:

【1】es6代码转换成es5:

  • 通过配置,可以将 <script> 里的 es6代码。
  • 指例如 created 这个函数里,使用的 es6 代码。
  • 而 created 本身即可以用 created: function(){} ,也可以用 created(),都能正常识别),自动通过 babel 编译为 es5 的代码;
  • 参照【2.4、使用babel-loader】

【2】图片url

  • 加载图片,路径是会被正常处理的,但是仅仅只有路径是不行的。
  • 就像 css-loader 也能处理图片的路径,但依然需要 file-loader 来处理图片一样。
  • 参照【2.5、图片】

【3】css 预处理器

  • 只需要安装对应的 css 预处理器的 loader,以及在 .vue 文件里标识一下,就能被 vue-loader 所使用,无需额外在 webpack.config.js 里配置。
  • 使用方法见【2.3、使用css预处理器】

【4】自带 postcss

  • 查看 vue-loader 的 package.json, 会发现在 dependencies 里有 postcss
  • 注意不是 postcss-loader,loader 是给 webpack 用的,而postcss 是类似 less、sass 等,更全面的 css 处理器(不止是预处理器)。
  • 但是假如我们需要 postcss-loader 的功能,那么是不需要额外安装 postcss-loader 的。
  • 详细使用说明参照下面【2.2、使用 postcss 的功能】

2.2、使用 postcss 的功能

之前讲过postcss-loader,点击查看

假如我们需要在 vue-loader 里,通过 postcss 添加兼容性 css 前缀,很简单。

1、先安装 autoprefixer

npm install autoprefixer --save
复制代码

2、兼容性插件的配置,假如我们在 postcss.config.js 里配置,如下写就行了(跟使用 postcss-loader 方法是一样的)

let autoprefixer = require('autoprefixer');

module.exports = {
    plugins: [
        autoprefixer({
            browsers: [
                // 加这个后可以出现额外的兼容性前缀
                "> 0.01%"
            ]Z
        })
    ]
}
复制代码

这就足够了,无需其他操作。

2.3、使用css预处理器

这里使用 less 作为示例,而 SASS 或者其他,是类似的。

首先要安装 less-loader

npm i --save less-loader
复制代码

然后在 .vue 文件,需要使用 less 语法的 <style> 标签里,添加一个属性 lang="less" 就行。

但是,如果你使用的是 webstorm 作为 IDE,那么 webstorm 是无法正常以 less 语法来识别这个的,因此我们还需要额外添加一个属性 type="text/less"

因此给出示例代码(局部作用域、less语法、支持webstorm识别):

<style scoped lang="less" type="text/less">
    .child-component {
        .text {
            font-size: 30px;
            font-weight: bold;
        }
    }
</style>
复制代码

2.4、使用babel-loader

使用 babel 很简单,同样,无需额外配置。

首先参照我写的 babel-loader 这一篇内容,安装 babel-loader 和相关的东西。

然后在项目跟目录下添加 .babelrc 文件,里面的内容和 babel-loader 的配置是一样的。

除此之外,无需其他额外配置。

2.5、图片

引用图片,我们还是需要使用 file-loader ,可能还需要使用 url-loader(根据需要不需要转 base64 字符串)

就假设我们需要同时使用这两个吧,配置起来非常简单。

先安装 file-loaderurl-loader,参照 url-loaderfile-loader

然后配置一波图片匹配在 webpack.config.js,就行了。

{
    test: /\.(png|jpg|jpeg|gif)$/,
    use: [
        {
            loader: 'url-loader',
            options: {
                limit: 8192,
                mimetype: 'image/png',
                name: 'img/[hash].[ext]'
            }
        }
    ]
}
复制代码

2.6、其他

以以上几个为例,想必大家已经了解了,vue-loader 本身无需特殊配置,也不需要给 .vue 文件添加很多其他的 loader 的处理。

我们只需要安装对应的 loader,然后配置一下 loader 即可。

也就是说,如果要添加某个 loader,大部分只需要安装,不需要额外配置。

假如我们需要额外处理某些 loader,不使用 vue-loader 本身的,也是可以的。

参照官网这个说明 loaders,很简单。

3、vue-loader 独有功能

3.1、CSS Modules

简单来说,就是模块化css。

如果看过我的 css-loader 这一篇的【2.8、modules等】,可能就能体会到 css-loader 的这个功能是如何在这里实现的了。

例如,假如我在 .vue 文件里加了以下标签。

<!-- 调用方法示例:<div :class="$style.test"> -->
<style module>
    .test {
        border: 2px solid gold;
    }
</style>

<!-- 调用方法示例: <div :class="foo.bar"> -->
<style module="foo">
    .bar {
        position: relative;
        animation: move 2s linear infinite;
    }

    @keyframes move {
        0% {
            left: 0;
        }
        50% {
            left: 100px;
        }
        100% {
            left: 0;
        }
    }
</style>
复制代码

那么编译后,代码会变成以下情况:

<style type="text/css">
    ._1MwiT3GNpEBkInFbvenNqf_1 {
        border: 2px solid gold;
    }
</style>

<style type="text/css">
    ._2zuIotdSd4Qw4JyIOKek2x_2 {
        position: relative;
        animation: _1Uijvgp95FT2K79a3BqAeg_2 2s linear infinite;
    }

    @keyframes _1Uijvgp95FT2K79a3BqAeg_2 {
        0% {
            left: 0;
        }
        50% {
            left: 100px;
        }
        100% {
            left: 0;
        }
    }
</style>
复制代码

也就是说,加上 modules 属性后,原本的样式名会被重命名,然后可以通过变量来获取重命名后的名字。

获取方法如下:

【1】只有 module 属性的 <style> 标签中的 class 类名,通过 $style.类名 来获取,例如: $style.test

【2】module属性被命名(例如 module="foo"),通过 module名.类名来获取,例如: foo.bar

这个变量在对应组件中,可以通过 this.$style.test 或者 foo.bar 来获取,

console.log(this.$style);    // {test: "_1MwiT3GNpEBkInFbvenNqf_1"}
复制代码

4、问题和解决

4.1、引入 vue 但是不能正常运行

打包后,无法正常运行。查看 console,有以下报错:

You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.
复制代码

原因可以参照这个文章Vue 2.0 升(cai)级(keng)之旅

这里简单总结一下,就是默认引入的 Vue,并不是 vue.js,而是 vue.common.js,而后者是运行时环境使用的。

解决方法很简单:

【方法一】更改引入路径:

引入的更改为:import Vue from 'vue/dist/vue.js'

【方法二】添加别名:

在 webpack.config.js 里添加别名:

resolve: {
    alias: {
        'Vue': 'vue/dist/vue.js'
    }
}
复制代码

注意,如果添加别名的话,alias 属性的 key,需要和引入的 大小写要保持一致

即这里的是大写字母开头的 Vue,那么引入的时候也应该是大写字母开头的:import Vue from 'Vue'

4.2、后缀名省略

一般情况下,如果要引入 child.vue,那么正常情况下,会使用 import child from './child.vue' 来实现

那么假如我想省略掉后缀名,写成 import child from './child' ,该怎么办?

解决办法:

修改 webpack.config.js 中的 resolve 属性,例如:

// 以上省略
resolve: {
    extensions: ['.js', '.vue'],
//以下省略
复制代码

就可以无后缀名引用 .vue 结尾的文件了,注意,如果有相同名字但不同后缀名的,有先后顺序。

关注下面的标签,发现更多相似文章
评论