Vue + Webpack + Vue-loader學習教程之相關配置篇

更新時間：2017年03月14日 10:52:57 作者：Terry√

這篇文章主要介紹了關于Vue + Webpack + Vue-loader的相關配置篇，文中通過示例代碼介紹的非常詳細，相信對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。

前言

之前已經介紹過了Vue + Webpack + Vue-loader的相關功能介紹，大家可以點擊這篇文章了解詳情。下面就來看看相關配置篇，感興趣的可以參考學習。

使用預處理器

在 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 組件發(fā)布成一個第三方組件的話，避免這樣使用

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 也能幫你配置這些。

這樣做的好處是：

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

總結

好了，以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章: