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
複製代碼

經過以上安裝，至少能夠開始使用了

一、概述

簡單來講，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.一、默認配置

默認配置下，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 結尾的文件了，注意，若是有相同名字但不一樣後綴名的，有前後順序。