vue-loader 細節

vue-loader 能根據 .vue 文件，導入一個vue組件。我這裏從 vue-cli 的構建項目中抽取了vue-loader 一個小例子出來：vuedemo/demo02  

vue-loader 自帶postcss的依賴，也就是說被引入的 .vue 組件中的css 會被postcss處理，但須要本身手動添加一個postcss的配置文件：

// .postcssrc.js
module.exports = {
  "plugins": { "autoprefixer": {} } }

以上配置了自動添加瀏覽器前綴，能正常運行。

 

簡要介紹下 postcss：

　　PostCSS 的主要功能只有兩個：第一個就是前面提到的把 CSS 解析成 JavaScript 能夠操做的 AST，第二個就是調用插件來處理 AST 並獲得結果。以上就是使用的autoprefixer插件，處理的效果以下：

#content {
 display: flex;
}

// after
#content {
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
}

　　因爲 CSS 規範的制定和完善通常須要花費比較長的時間，瀏覽器廠商在實現某個 CSS 新功能時，會使用特定的瀏覽器前綴來做爲正式規範版本以前的實驗性實現。好比 Webkit 核心的瀏覽器使用-webkit-，微軟的 IE 使用-ms-。爲了兼容不一樣瀏覽器的不一樣版本，在編寫 CSS 樣式規則聲明時一般須要添加額外的帶前綴的屬性

　　

資料參考：

　　https://vuejs.org/v2/guide/installation.html

　　https://webpack.js.org/configuration/resolve/

　　vue的庫文件分爲兩大類：compiler和runtime。前者用於把template（template選項以及 .vue 文件中template區域）編譯到render函數中，然後者僅僅支持vue框架的運行處理，不支持前者的模板轉換過程，運行時最終執行的都是render函數。

　　因此，若是按中不包含template，就能夠僅僅引入runtime庫就能夠了，不然要引入full（compiler + runtime）

　　對於以上倉庫中的例子，若是不在webpack配置文件中指定引入 full版本的文件 ：

 resolve: {
        extensions: [".vue",".js",".json"], alias: { 'vue$': 'vue/dist/vue.js', } },

打包後運行就會出現這個錯誤：

[Vue warn]: 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的是runtime版，不支持 .vue 文件中的template轉換。

 

https://cn.vuejs.org/v2/guide/render-function.html

https://cn.vuejs.org/v2/guide/deployment.html

使用vue單文件組件都是經過vue-loader來引入的，這裏記錄一些細節

自動實現了template到render函數的轉換

　　在一個vue組件中，組件的html代碼能夠經過template屬性或render函數來指定，二者的區別在於，template會轉換爲render函數來執行，也就是說最終執行的都是render函數。

因此在生產環境中，能夠先進行編譯，這樣生產環境中運行就再也不須要動態轉換，性能能夠提升一些。

　　vue-loader默認作了這個轉換過程，打包後的bundle文件有以下代碼 ：

//...
"use strict";
var render = function() {
  var _vm = this
  var _h = _vm.$createElement
  var _c = _vm._self._c || _h
  return _c("div", { staticClass: "wrapper" }, [
    _c("div", { staticClass: "container" }, [
      _vm.loginPage
        ? _c(
            "form",
            {
              attrs: { action: "" },
              on: {
                submit: function($event) {
                  $event.preventDefault()
                  _vm.login($event)
                }
              }
            },
// ....

　　.vue （單文件組件）中的template已經被轉換了。實現以上過程其實是vue-loader 內 調用了vue-template-compiler 。在vue-loader/template-compiler/index.js 中有對vue-template-compiler 進行引用

處理css

　　.vue 文件中 style表內的樣式默認都是經過js動態寫入到head中，若是這個js較慢才執行，則屏幕可能出現閃屏現象，並且對瀏覽器緩存不友好。解決辦法是使用extract-text-webpack-plugin插件。

啓用scss

The vue config in webpack-simple works for lang="scss" (after installing sass-loader and node-sass), but it does not include the ExtractTextPlugin.

只須要安裝sass-loader 和 node-sass 以後在style標籤上添加一個lang="scss"便可