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)加載。這樣一來極大地解決了我們對資源引用的依賴問題！

vue-cli的webpack模板已經(jīng)為我們配置好了絕大多數(shù)常用的loader，在實際運用中我們只需要了解它們是怎么來的，應(yīng)該怎么用，需要的時候如何修改就夠了。

●  用別名取代路徑引用

在項目開發(fā)過程中有可能有許多包是沒有放在npm上的，有一些較老的可能還依然只存在于bower上，某些甚至在bower與npm上都找不到，而不得不通過下載的方式在項目內(nèi)引用，這樣一來我們的代碼可能通過require就得在代碼內(nèi)引用一段很長的文件路徑，如下所示

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

這種包的引用方式明顯違反了CommonJS的編程規(guī)范，對于這些長路徑，甚至還具有“../..”這些相對路徑搜索的定義，我們可以通過webpack的resolve配置項來解決。就以select這個組件為例，在webpack.base.config.js中加入以下的這個別名的定義：

module.exports = {
 entry:{ ... },
 output: { ... },
 module:{ ... },
 resolve: {
  extensions:['','.js'],
  alias:{ // 別名
   'bs-select':'bower_components/bootstrap-select/dist/js/select.js'
  }
 }
}

有了這個定義以后，我們就可以將上面那個長引用改為下面的寫法：

import Selector from 'bs-select';

絕對不要讓路徑引用進入到我們的代碼，因為這是代碼的“癌癥”，一旦開始植入并生長起來，以前的代碼將難以維護！

●  配置多入口程序

多數(shù)情況下我們的程序入口不單單只有一個，舉一個最簡單的例子，前臺提供給最終用戶使用（http://www.domain.com/index），后臺提供給登錄用戶使用（http://www.domain.com/admin/），那么自然需要多個與main.js類似的程序入口了。

首先在build/webpack.base.conf.js配置文件中的entry配置屬性上加上新的入口文件：

module.exports = {
 entry: {
 app: './src/main.js',
 admin : './src/admin-main.js'
 },
 // ... 省略
}

這是用于告訴webpack哪幾個是入口文件，這些文件需要被生成到啟動頁的<script>內(nèi)。

vue-cli的webpack模板使用HtmlWebpackPlugin插件，生成HTML入口頁面并自動將生成后的JS文件和CSS文件的引用地址寫入到頁內(nèi)的<script>中。

這里就需要在build/webpack.dev.config.js文件內(nèi)的plugins配置項內(nèi)多配置一個HtmlWebpackPlugin插件，用于生成admin.html入口頁。

plugins:[
 // ... 省略
 // 這是原有的配置項，用于匹配注入app.js的輸出腳本
 new HtmlWebpackPlugin({
 filename: process.env.NODE_ENV === 'testing'
  ? 'index.html'
  : config.build.index,
 template: 'index.html',
 chunks: ['app'], // 與原配置的不同的是要用chunks指定對應(yīng)的entry
 inject: true,
 minify: {
  removeComments: true,
  collapseWhitespace: true,
  removeAttributeQuotes: true
 },
 chunksSortMode: 'dependency'
 }),
 // 這是新增項，用于匹配注入admin.js的輸出腳本
 new HtmlWebpackPlugin({
 filename: process.env.NODE_ENV === 'testing'
  ? 'admin.html'
  : config.build.admin,
 template: 'index.html',
 chunks: ['admin'],
 inject: true,
 minify: {
  removeComments: true,
  collapseWhitespace: true,
  removeAttributeQuotes: true
 },
 chunksSortMode: 'dependency'
 }),
]

需要強調(diào)一點的是，這里的HtmlWebpackPlugin配置必須用chunks指定在上文entry內(nèi)對應(yīng)的入口文件的別名。

關(guān)于HtmlWebpackPlugin更多配置內(nèi)容可以參考：https://github.com/kangax/html-minifier#options-quick-reference。

還有就是得將同樣的配置加入到生產(chǎn)環(huán)境專用的webpack配置文件webpack.prod.conf.js中，否則當我們運行npm run build時是不會輸出admin.js和admin.html這兩個入口文件的（由于配置內(nèi)容相同這里就不再重復(fù)了）。

最后，如果使用了vue-router就得對connect-history-api-fallback插件的配置進行修改，否則原有的默認配置只會將所有的請求轉(zhuǎn)發(fā)給index.html，這樣就會導(dǎo)致History API沒有辦法正確地將請求指向admin.html，導(dǎo)致熱加載失敗，具體做法如下所述。

打開dev-server.js文件，將app.use(require('connect-history-api-fallback')())配置改為以下的方式：

// handle fallback for HTML5 history API
var history = require('connect-history-api-fallback')
// app.use(require('connect-history-api-fallback')())
app.use(history({
 rewrites: [
 { from: /^\/admin\/.*$/, to: '/admin.html' }
 ]
}));

新入口需要有明確區(qū)分的路由規(guī)則，否則還是會產(chǎn)生熱加載失敗的情況，這樣就非常不便于開發(fā)了。

總結(jié)

以上所述是小編給大家介紹的腳手架vue-cli工程webpack的基本用法詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

最新評論