Webpack3之Vue-loader配置简述

时间 2019-11-16

标签 webpack3 webpack vue loader 配置简述繁體版

原文原文链接

VUE-LOADER配置简述

前注：

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

若是能够，请给本项目加【Star】和【Fork】持续关注。html

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

DEMO地址webpack

0、使用说明

首先你得会用 Vue.js，否则可能对本文部份内容没法理解git

安装：es6

npm install
复制代码

运行：github

// 开发模式（推荐使用这个）
npm run dev

// 普通模式（须要执行后手动刷新页面）
npm run test
复制代码

单独安装 Vue-loader：web

首先要有 Vue；
其次解析 vue 文件还要 vue-template-compiler；
解析 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
复制代码

经过以上安装，至少能够开始使用了npm

一、概述

简单来讲，vue-loader 就是处理 .vue 文件的。json

本文除了涉及到 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.一、默认配置

默认配置下，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.一、CSS Modules】

须要额外配置才有的功能：

【1】es6代码转换成es5：

经过配置，能够将 <script> 里的 es6代码。
指例如 created 这个函数里，使用的 es6 代码。
而 created 自己便可以用 created: function(){} ，也能够用 created()，都能正常识别），自动经过 babel 编译为 es5 的代码；
参照【2.四、使用babel-loader】

【2】图片url

加载图片，路径是会被正常处理的，可是仅仅只有路径是不行的。
就像 css-loader 也能处理图片的路径，但依然须要 file-loader 来处理图片同样。
参照【2.五、图片】

【3】css 预处理器

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

【4】自带 postcss

查看 vue-loader 的 package.json，会发如今 dependencies 里有 postcss。
注意不是 postcss-loader，loader 是给 webpack 用的，而postcss 是相似 less、sass 等，更全面的 css 处理器（不止是预处理器）。
可是假如咱们须要 postcss-loader 的功能，那么是不须要额外安装 postcss-loader 的。
详细使用说明参照下面【2.二、使用 postcss 的功能】

2.二、使用 postcss 的功能

以前讲过postcss-loader，点击查看。

假如咱们须要在 vue-loader 里，经过 postcss 添加兼容性 css 前缀，很简单。

一、先安装 autoprefixer，

npm install autoprefixer --save
复制代码

二、兼容性插件的配置，假如咱们在 postcss.config.js 里配置，以下写就好了（跟使用 postcss-loader 方法是同样的）

let autoprefixer = require('autoprefixer');

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

这就足够了，无需其余操做。

2.三、使用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.四、使用babel-loader

使用 babel 很简单，一样，无需额外配置。

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

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

除此以外，无需其余额外配置。

2.五、图片

引用图片，咱们仍是须要使用 file-loader ，可能还须要使用 url-loader（根据须要不须要转 base64 字符串）

就假设咱们须要同时使用这两个吧，配置起来很是简单。

先安装 file-loader 和 url-loader，参照 url-loader 和 file-loader。

而后配置一波图片匹配在 webpack.config.js，就好了。

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

2.六、其余

以以上几个为例，想必你们已经了解了，vue-loader 自己无需特殊配置，也不须要给 .vue 文件添加不少其余的 loader 的处理。

咱们只须要安装对应的 loader，而后配置一下 loader 便可。

也就是说，若是要添加某个 loader，大部分只须要安装，不须要额外配置。

假如咱们须要额外处理某些 loader，不使用 vue-loader 自己的，也是能够的。

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

三、vue-loader 独有功能

3.一、CSS Modules

简单来讲，就是模块化css。

若是看过个人 css-loader 这一篇的【2.八、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.一、引入 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.二、后缀名省略

通常状况下，若是要引入 child.vue，那么正常状况下，会使用 import child from './child.vue' 来实现

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

解决办法：

修改 webpack.config.js 中的 resolve 属性，例如：

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

就能够无后缀名引用 .vue 结尾的文件了，注意，若是有相同名字但不一样后缀名的，有前后顺序。