vue-cli + webpack 多頁面實例配置優化方法

vue+webpack是否有多頁面

目前使用vue來作項目，估計大部分都是單頁面（SPA）應用，一個輕型的 MVVM 框架，誰用了MVVM框架，就再也回不去JQ時代了，哈哈。

在手機端的項目，使用vue + vue-router是high到爆，不只僅是咱們開發的而言，最主要的用戶體檢也是開足馬力，體檢感槓槓的。

那問題來了，使用vue+webpack的單頁面是爽到爆，那若是是多頁面也能不能high到爆呢？那固然呀，必須的必，vue、webpack的忠粉（哈哈，好像這忠粉不關係到多頁面的）。

在谷歌找vue 多頁面，實例仍是比較少，功夫不負有心人，在yaoyao1987那找到了，具體能夠到這個yaoyao1987 github，很是感謝yaoyao1987童鞋，今天要講的內容是基於yaoyao1987童鞋的多頁面實例上再優化的。

優化了點啥

demo、github地址

一、demo：http://v.lanchenglv.com/demo/...
二、github：https://github.com/bluefox168...

優化的內容

咱們先來說講，具體咱們優化了什麼內容。

1. 增長全局統一使用的模塊Lib.js庫，可能這裏看不明白，沒關係，後面會講到。

2. 支持字體圖標

3. 增長乾淨的頁面、組件的模板，複製便可以使用。

4. 去掉多餘的代碼註釋，坑了個人註釋，別再坑人了

5. 構建時，增長對css打包的支持

6. 提取公共模塊
   ........

使用方法

# 安裝
npm install

# 調試環境 serve with hot reload at http://localhost:8083/module/login.html
npm run dev

# 生產環境 build for production with minification
npm run build

本地默認訪問端口爲8083，須要更改的童鞋請到項目根目錄文件config.js修改。

目錄結構

webpack
 |---build
   |---src
     |---assets 資源
          |---css.css  css
         |---img  圖片文件
         |---font/  字體圖標
     |---components 組件
           |---Button.vue  按鈕組件
          |---module-head.vue  head組件
     |---module各個頁面模塊
       |---login    登錄模塊
         |---login.html
         |---login.js
         |---app.vue
       |---welcome       歡迎頁模塊
         |---welcome.html
         |---welcome.js
         |---app.vue

從目錄結構上，各類組件、頁面模塊、資源等都按類新建了文件夾，方便咱們儲存文件。
其實咱們全部的文件，最主要都是放在module文件夾裏，以文件夾名爲html的名稱。
例如

|---login    登錄模塊
   |---login.html
   |---login.js
   |---app.vue

就是咱們訪問時的地址：

http://localhost:8083/module/login.html

這裏必定要記住，在module裏下級文件夾，一個文件夾就是一個html，js、vue template 都統一放在當前文件夾裏，固然你也能夠繼續放其餘的資源，例如css、圖片等，webpack會打包到當前頁面裏。
若是項目不須要這個頁面了，能夠直接把這個文件夾直接刪除掉，乾淨項目，幹活也開心。
像之前咱們傳統開發項目，全部的圖片都習慣放在images裏，當項目有改動時，有些圖片等資源用不上了，但還佔着坑位，雖然如今的硬件容量大到驚人，但咱們應該仍是要養到一個良好的習慣。
當前頁面的開發在app.vue裏，打開後你就會看到很熟悉的<template>、<script>、<style scoped>了。

全局統一公共模塊

咱們作多頁面開發，那確定會涉及到全局都能調用的公共庫，或者是把別人封裝的庫也一塊兒打包在全局公共模塊裏。

若是看過源碼的童鞋，在*.vue頁面裏，我都統一import了一個文件

import Lib from 'assets/Lib.js'

這就是全局統一公共模塊，咱們先看看Lib.js裏的代碼

# 導入全局的css
import 'assets/css.css';
# 導入全局的站點配置文件
import C from 'assets/conf';
# 導入全局的共用事件
import M from 'assets/common';

var Rxports = {
    M,C
};

module.exports = Rxports

在上方代碼的M、C都是什麼鬼，聰明的小夥伴就知道我想幹嗎了，省寫少事唄。
例如咱們如今想調用APP的名稱，在.vue裏能夠這麼寫

import Lib from 'assets/Lib.js'
Lib.C.appname;  # 藍鍋鍋

只須要在*.vue裏導入import Lib from 'assets/Lib.js'，就能夠處處使用全局模塊了。
再也不像傳統的開發模式，須要一堆的<script>一個一個的來放到頁面的底部。
傳統方式：

<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
></script>
  <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

這裏就是我想講的關於優化的第一點提到的全局模塊庫。
固然也有童鞋問呀，會不會每一個頁面都會把這些全局模塊庫都打包在當前頁面，那JS文件體積大到驚人。
哎呀，你當webpack是二貨的呀，webpack會自動幫你處理好的，會把在*.vue裏的import Lib from 'assets/Lib.js'的庫自動提取出來，放到一個全局的JS文件裏，這就是自動構造的神奇呀，省心省電，媽媽不再用擔憂我作重複的工做了。

在Lib.js裏，咱們也看到有兩個導入的JS文件，主要來作什麼的呢？
爲了更好的在全局調用模塊裏，知道哪一個模塊的做用是什麼，另外在寫代碼時更能快速查找到JS文件，我區分了配置文件和共用事件文件，即conf、common，下面說下具體的用途。

# 儲存站點的配置，例如web的名稱、LOGO地址等
import C from 'assets/conf';
# 導入全局的共用事件，例如在微信的JS SDK初始化，每一個頁面都要分享，都須要初始化的，一次調用，全局使用，棒！！
import M from 'assets/common';

固然，你也能夠不像這樣區分不一樣的JS文件，刪除也沒有影響的，具體也要看項目的須要而定，不能死讀書。

另外，若是想要乾淨的頁面模塊模板，能夠到根目錄的tpl裏複製module_tpl整個文件夾，而後粘貼到src/module目錄下立刻就能夠進行開發了，開發以前記得在cmd裏npm run dev跑一遍，新增頁面都要從新dev一遍。

module咱們就講到這裏，下面咱們來說講組件的調用，最愛組件了。

組件的使用

組件（Component）是 vue.js 最強大的功能之一，當你發現使用組件能夠減小造輪子裏，你會深深的愛上它。
咱們的組件都是放在components目錄下的，調用組件的方法也很簡單。

import Button from 'components/Button';

而後記得在*.vue註冊導入的組件，要否則會影響使用。

import Button from 'components/Button';
export default {
  data() {
    return {
        
    }
  },
  components: {
   # 在這裏註冊組件，不註冊組件的話，是沒法使用的。
    Button    
  } 
}

若是想要乾淨的組件模板，能夠到根目錄的tpl裏找到components_tpl的Hello.vue文件，複製粘貼到components目錄下立刻就能夠進行開發了。

圖標字體

在yaoyao1987童鞋裏，是沒有打包構造圖標字體的代碼邏輯，這也是我優化上去的一部分，建議使用iconfont圖標（http://www.iconfont.cn） ，強大到無所不能，能夠到iconfont下載本身想要的圖標字體，記得是把文件放到\src\assets\font文件夾裏。

webpack會自動打包的，無需理會，另外還有一點，iconfont提供的css文件，複製到\src\assets\css.css文件便可，要否則沒有效果哈。
在*.vue裏使用調用就好了。

<i class="iconfont">&#33</i>

構建代碼說明

那咱們使用的是vue-cli的手腳架，用過vue+cli的朋友知道主要構建代碼都放在根目錄build下，vue多頁面主要修改了這三個JS文件webpack.base.conf.js、webpack.dev.conf.js、webpack.prod.conf.js

# 【webpack.base.conf.js】主要是構建的全局設置，主要是增長了如下代碼，已經增長在JS文件裏，這裏只是作一個補充說明，具體請看`build/webpack.base.conf.js`。

var entries = getEntry('./src/module/**/*.js'); // 得到入口js文件
var chunks = Object.keys(entries);

plugins: [
   // 提取公共模塊
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendors', // 公共模塊的名稱
      chunks: chunks, // chunks是須要提取的模塊
      minChunks: chunks.length
    }),
   // 配置提取出的樣式文件
    new ExtractTextPlugin('css/[name].css')
 ]

function getEntry(globPath) {
  var entries = {},
    basename, tmp, pathname;

  glob.sync(globPath).forEach(function (entry) {
    basename = path.basename(entry, path.extname(entry));
    tmp = entry.split('/').splice(-3);
    pathname = tmp.splice(0, 1) + '/' + basename; // 正確輸出js和html的路徑
    entries[pathname] = entry;
  });
  
  return entries;
}

這裏還要作一個特別說明，咱們每次更新資源文件，爲了去緩存，都會給文件生成hash值，例如：

<script type='text/javascript' src='vendors.61714a310523a3df9869.js' charset='utf-8'></script>
<script type='text/javascript' src='vendors.js?f3aaf25de220e214f84e' charset='utf-8'></script>

這二者都是爲了去緩存，惟一的區別的生成的文件名不同，有些項目，爲了能夠能出嚴重BUG時第一時間回滾，以文件名+hash的方式儲存，每次生成都不會覆蓋以前的代碼，以方便查BUG或者回滾。
另外一種方式，就是以文件名+?hash的方式儲存，每次都會覆蓋以前生成的資源，方便在某些特殊項目使用。
我在webpack.base.conf.js也已經註釋說明了。

module.exports = {
  entry: entries,
  output: {
    path: config.build.assetsRoot,
    publicPath: config.build.assetsPublicPath,
    /* ---- 生成的例子 vendors.61714a310523a3df9869.js --- */
    //filename: '[name].[hash].js'
    /* ---- 生成的例子 vendors.js?f3aaf25de220e214f84e --- */
    filename: '[name].js'
  }
}

結束言

不知不覺時間又過去，囉嗦一堆堆的，每一個項目需求都不同，配置也會有許不一樣，也但願更多的朋友分享本身的代碼和想法出來哈，也能夠一塊兒交流。
有須要一塊兒交流的能夠加個人微信，amwhuang，記得備註技術交流哈。

首發博客地址：http://lanchenglv.com/article...