前言

之前已經(jīng)介紹過了Vue + Webpack + Vue-loader的相關(guān)功能介紹，大家可以點(diǎn)擊這篇文章了解詳情。下面就來看看相關(guān)配置篇，感興趣的可以參考學(xué)習(xí)。

使用預(yù)處理器

在 Webpack 中，所有的預(yù)處理器需要和一個(gè)相應(yīng)的加載器一同使用。vue-loader 允許你用其它的 Webpack 加載器去處理 Vue 組件一部分代碼。它會(huì)根據(jù) lang 屬性自動(dòng)用適當(dāng)?shù)募虞d器去處理。

CSS

例如，我們編譯用 SASS 編譯 <style> 標(biāo)簽：

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

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

在引擎內(nèi)，首先，<style> 標(biāo)簽內(nèi)的內(nèi)容會(huì)被 sass-loader 編譯，然后再被進(jìn)一步處理。

JavaScript

默認(rèn)情況下，Vue 組件內(nèi)的所有 JavaScript 會(huì)被 babel-loader 處理。當(dāng)然，你也可以更改：

npm install coffee-loader --save-dev

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

Templates

處理模板的過程有點(diǎn)不同，因?yàn)榇蠖?Webpack 模板加載器（比如 jade-loader ）會(huì)返回一個(gè)模板處理函數(shù)，而不是被編譯過的 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.

內(nèi)聯(lián)加載請求

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

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

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

URL資源處理

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

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

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

如上會(huì)被再轉(zhuǎn)譯成：

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

因?yàn)?.png 并不是個(gè) JavaScript 文件，你需要配置 Webpack 使用 file-loader 或者 url-loader 處理它們。項(xiàng)目腳手架工具 vue-cli 也能幫你配置這些。

這樣做的好處是：

1. file-loader 允許你指定在哪里復(fù)制和存放靜態(tài)資源文件 ，以及用版本哈希值命名從而更好利用緩存。 這意味著，可以把圖片放到 *.vue 文件旁邊，可使用相對路徑，而不需要擔(dān)心發(fā)布時(shí)候的 URL。使用適當(dāng)?shù)呐渲?，Webpack 在打包輸出的時(shí)候，會(huì)自動(dòng)把文件路徑轉(zhuǎn)為正確的 URL。
2. url-loader 允許你內(nèi)聯(lián) base-64 數(shù)據(jù)格式的URL資源，如果小于設(shè)定的閾值。這樣可以減少 HTTP 請求小文件的數(shù)量。如果文件大于這個(gè)閾值。會(huì)自動(dòng)it automatically falls back to file-loader.

加載器高級配置

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

Webpack 1.x Example:

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

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

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

這里是個(gè)實(shí)際的加載器配置高級用法的實(shí)例 提取組件內(nèi)的 CSS 到單獨(dú)文件。

提取CSS到單獨(dú)文件

如下是提取所有程序的 Vue 組件中的 CSS 到一個(gè)單獨(dú)的 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 = {
 // 其他選項(xiàng)...
 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")
 ]
}

總結(jié)

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