webpack的打包依賴于它的一個重要配置文件webpack.config.js，在這個配置文件中就可以指定所有在源代碼編譯過程中的工作了，就一個配置就可以與冗長的Gruntfile或者Gulpfile說再見了。

一個完整的工程項目中的webpack的配置遠遠沒有這么簡單，隨著工程的構(gòu)建要求的增加，webpack.config.js內(nèi)的配置項目也會隨之增加，webpack還有許許多多的選項提供給我們進行靈活配置，它只是一個構(gòu)建工具，我們只需要了解在Vue項目中它基本能為我們做到的工作、最小化的配置是如何的就足夠了，在以后需要對它進行擴展與優(yōu)化時，帶著問題去查官方文檔也是非常容易的事。

●  樣式表引用

某些頁面或者組件可能具有特定的樣式定義，這些樣式對于其他頁面來說是冗余的，我們只希望這些組件在應(yīng)用時才自動加載這些特定的樣式，此時用webpack我們就能在源代碼中加入以下代碼來動態(tài)加載CSS：

import Vue from 'vue'// ... 省略// 引用指定的樣式源文件import './app/assets/less/dark.less'export default { // ... 省略}

此時我們只需要在webpack的配置中加入less-loader，那么webpack在打包的時候就會自動將less轉(zhuǎn)換為CSS，并將CSS的動態(tài)代碼生成到JS文件中。當Vue組件被加載到頁面并實例化后，將在DOM內(nèi)插入這個特定的行內(nèi)樣式<style>以實現(xiàn)動態(tài)樣式的應(yīng)用。

對于*.css文件同樣也是適用的，例如導(dǎo)入某個第三方庫中必需的樣式表：

import 'uikit/dist/css/components/tabs.css'

●  字體的引用

假設(shè)在dark.less內(nèi)加入對自定義字體文件的樣式定義：

@font-face {  font-family: 'Darkenstone';  src: url('./Darkenstone.eot');  src: url('./Darkenstone.eot?#iefix') format('embedded-opentype'),   url('./Darkenstone.woff2') format('woff2'),   url('./Darkenstone.woff') format('woff'),   url('./Darkenstone.ttf') format('truetype'),   url('./Darkenstone.svg#Darkenstone') format('svg');   font-weight: normal;      font-style: normal;}.header{  display: flex;  flex-flow: row nowrap;  & > h1 {   font: 16pt 'Darkenstone';  }}

這里.header>h1指定了一個Darkenstone的自定義字體，這個字體瀏覽器一定是不能識別的，以前我們在樣式表中先定義這個字體樣式并指定加載位置（如上文@font-face的定義），然后在頁面中引用這個樣式表，這是多么麻煩的一件事，不是嗎？

如果用了webpack后，我們只是在配置文件內(nèi)加入了一個url-loader：

{  test: //.(woff2?|eot|ttf|otf)(/?.*)?$/,  loader: 'url'}

我們并不需要在源代碼中做任何改變，因為之前已經(jīng)引用過樣式表dark.less，而字體是在樣式表中的，webpack將在打包的時候為我們識別并在代碼中引入字體的動態(tài)加載。這樣一來極大地解決了我們對資源引用的依賴問題！