Vue + Webpack + Vue-loader 系列教程（2）相關配置篇

原文地址：https://lvyongbo.gitbooks.io/vue-loader/content/

使用預處理器

在 Webpack 中，所有的預處理器需要和一個相應的加載器一同使用。vue-loader 允許你用其它的 Webpack 加載器去處理 Vue 組件一部分代碼。它會根據 lang 屬性自動用適當的加載器去處理。

CSS

例如，我們編譯用 SASS 編譯 <style> 標簽：

npm install sass-loader node-sass --save-dev

<style lang="sass">
  /* 這里寫一些 sass 代碼 */
</style>

在引擎內，首先，<style> 標簽內的內容會被 sass-loader 編譯，然后再被進一步處理。

JavaScript

默認情況下，Vue 組件內的所有 JavaScript 會被 babel-loader 處理。當然，你也可以更改：

npm install coffee-loader --save-dev

<script lang="coffee">
  # 這里寫一些 coffeescript!
</script>

Templates

處理模板的過程有點不同，因為大多 Webpack 模板加載器（比如 jade-loader ）會返回一個模板處理函數，而不是被編譯過的 HTML 字符串。我們只要安裝 jade ，而不是 jade-loader ：

npm install jade --save-dev

<template lang="jade">
div
  h1 Hello world!
</template>

重要提示: 如果你使用 vue-loader@<8.2.0, 你也需要安裝 template-html-loader.

內聯加載請求

在 lang 屬性上，你能使用 Webpack loader requests :

<style lang="sass?outputStyle=expanded">
  /* use sass here with expanded output */
</style>

但是，注意這樣只適用特定的 Webpack，並不兼容 Browserify 和 vueify。 如果你想讓你的 Vue 組件發布成一個第三方組件的話，避免這樣使用

---

URL資源處理

默認情況，vue-loader 是自動用 css-loader 和 Vue 組件編譯器來處理樣式和模板文件的。在處理過程中，所有的資源 URL 比如<img src="...">, background: url(...) 和 CSS @import 都是被當做依賴的模塊來處理。

例如，url(./image.png) 被轉譯成 require('./image.png')。

<img src="../image.png">

如上會被再轉譯成：

createElement('img', { attrs: { src: require('../image.png') }})

因為 .png 並不是個 JavaScript 文件，你需要配置 Webpack 使用 file-loader 或者 url-loader 處理它們。項目腳手架工具 vue-cli 也能幫你配置這些。

這樣做的好處是：

1. file-loader 允許你指定在哪里復制和存放靜態資源文件 ，以及用版本哈希值命名從而更好利用緩存。 這意味着，可以把圖片放到 *.vue 文件旁邊，可使用相對路徑，而不需要擔心發布時候的 URL。使用適當的配置，Webpack 在打包輸出的時候，會自動把文件路徑轉為正確的 URL。

2. url-loader 允許你內聯 base-64 數據格式的URL資源，如果小於設定的閾值。這樣可以減少 HTTP 請求小文件的數量。如果文件大於這個閾值。會自動it automatically falls back to file-loader.

---

加載器高級配置

若你想自定義載器的配置，不要 vue-loader 來推斷。 或你只想覆蓋加載器內置的配置。 那就這樣做，在你 Webpack 配置文件里，添加一個 vue 塊，並指定 loaders 選項：

Webpack 1.x Example:

// webpack.config.js
module.exports = {
  // other options...
  module: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue'
      }
    ]
  },
  // vue-loader 配置
  vue: {
    // ... 其他 vue 選項
    loaders: {
      // 用 coffee-loader 加載所有沒有 "lang" 屬性的 <script> 
      js: 'coffee',
      // 直接把 <template> 作為 HTML 字符串來加載，不需先用 vue-html-loader 處理。
      html: 'raw'
    }
  }
}

Webpack 2.x (^2.1.0-beta.25):

module.exports = {
  // 其他選項...
  module: {
    // module.rules 是和版本1.x中的 module.loaders 是相同的
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue',
        // vue-loader 選項在這里配置
        options: {
          loaders: {
            // ...
          }
        }
      }
    ]
  }
}

這里是個實際的加載器配置高級用法的實例 提取組件內的 CSS 到單獨文件。

---

提取CSS到單獨文件

如下是提取所有程序的 Vue 組件中的 CSS 到一個單獨的 CSS 文件的配置：

Webpack 1.x

npm install extract-text-webpack-plugin --save-dev

// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin")

module.exports = {
  // other options...
  module: {
    loaders: [
      {
        test: /\.vue$/,
        loader: 'vue'
      },
    ]
  },
  vue: {
    loaders: {
      css: ExtractTextPlugin.extract("css"),
      // 你也能包含 <style lang="less"> 或其他語言
      less: ExtractTextPlugin.extract("css!less")
    }
  },
  plugins: [
    new ExtractTextPlugin("style.css")
  ]
}

Webpack 2.x (^2.1.0-beta.25)

npm install extract-text-webpack-plugin@2.x --save-dev

// webpack.config.js
var ExtractTextPlugin = require("extract-text-webpack-plugin")

module.exports = {
  // 其他選項...
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue',
        options: {
          loaders: {
            css: ExtractTextPlugin.extract({
              loader: 'css-loader',
              fallbackLoader: 'vue-style-loader' // <- this is a dep of vue-loader, so no need to explicitly install if using npm3
            })
          }
        }
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("style.css")
  ]
}