摘要：前段時(shí)間項(xiàng)目組計(jì)劃快速開發(fā)一個(gè)新的項(xiàng)目，開發(fā)那邊提供殼子和部分系統(tǒng)級(jí)功能，所有的頁(yè)面由完成，考慮兼容性安卓及。后面會(huì)繼續(xù)優(yōu)化，先把目前的基本部署方式記錄下來。

前段時(shí)間項(xiàng)目組計(jì)劃快速開發(fā)一個(gè)新的App項(xiàng)目，App開發(fā)那邊提供殼子和部分系統(tǒng)級(jí)功能，所有的頁(yè)面由h5完成，考慮兼容性安卓4.1及ios7.1。全新的項(xiàng)目，沒有歷史包袱，就嘗試了新的開發(fā)模式，采用了webpack + vue-cli + vue-router + es6 + axios這一套，從webpack配置到文件目錄，從開發(fā)流程到上線部署，摸索嘗試，到目前第一版已經(jīng)上線。后面會(huì)繼續(xù)優(yōu)化，先把目前的基本部署方式記錄下來。

webpack -- ^3.6.0  |   vue -- ^2.5.2    | vue-router -- ^3.0.1  |    axios -- ^0.17.1

項(xiàng)目采用前后端分離，后端開發(fā)只負(fù)責(zé)提供接口及靜態(tài)服務(wù)器

前端采用多個(gè)入口、多個(gè)單頁(yè)（每個(gè)單頁(yè)可能含vue-router路由到不同的子頁(yè)面）的方式，最終在dist下生成多個(gè).html及對(duì)應(yīng)的.js/.css文件

域名根目錄直接指向到npm run build之后生成的dist目錄，可以通過http://m.example.com/index.html直接訪問到index.html

最終生成的dist目錄類似于：

dist

index.html

center/

index.html

regist.html

login.html

static/

js/

vendor.[chunkhash].js

index.[chunkhash].js

regist.[chunkhash].js

login.[chunkhash].js

css/

index.[chunkhash].css

regist.[chunkhash].css

login.[chunkhash].css

例：http://m.example.com/index.html可以訪問到首頁(yè)，http://m.example.com/center/regist.html則訪問到注冊(cè)頁(yè)，而http://m.example.com/center/regist.html#agreement訪問到用戶協(xié)議頁(yè)

dist: 如上，不跟隨版本控制

build: webpack構(gòu)建相關(guān)配置

config: 開發(fā)相關(guān)配置

webpack.user.conf.js: 新建的自定義配置文件，理論上對(duì)webpack的配置更改都在這里進(jìn)行，然后對(duì)webpack.dev.conf.js和webpack.dev.prod.js進(jìn)行merge覆蓋

node_modules: 插件及依賴，不跟隨版本控制

src: 開發(fā)目錄

assets: 存放靜態(tài)資源，含base.js/base.css/plugins/images

components: 一些可能公用的小組件

entry: webpack打包的入口文件，有多個(gè)HtmlWebpackPlugin的實(shí)例，每個(gè)實(shí)例都對(duì)應(yīng)一個(gè)入口，每個(gè)入口打包出一個(gè)頁(yè)面

router: 某些頁(yè)面可能會(huì)用到vue-router實(shí)現(xiàn)前端路由，統(tǒng)一在此文件夾下定義，會(huì)被entry中的入口js引入使用

template: 存放HtmlWebpackPlugin打包基于的模板頁(yè)，多個(gè)入口可以共用一個(gè)模板頁(yè)。但實(shí)際開發(fā)中可能某些入口有私有的邏輯，需多帶帶創(chuàng)建模板

page: 存放實(shí)際頁(yè)面組件及組裝頁(yè)面

package.json: 包信息及依賴

例：如果我們想最終生成http://m.example.com/center/regist.html且含有前端路由的話，需要涉及到的文件有：

1. src/entry/regist.js，以創(chuàng)建入口文件，供`HtmlWebpackPlugin`使用
2. config/webpack.user.conf.js，新建入口，指定入口文件為`src/entry/regist.js`；新建`HtmlWebpackPlugin`實(shí)例，指定打包后生成的文件路徑、文件名及js
3. src/router/regist.js，因?yàn)樯婕暗角岸寺酚?，需要配置路由信?4. page/center/regist.vue、page/center/agreement.vue，進(jìn)行頁(yè)面自身邏輯樣式的開發(fā)

默認(rèn)的webpack配置大體是采用build/webpack.base.js + build/webpack.dev.js/build/webpack.prod.js merge后的結(jié)果，為了方便實(shí)現(xiàn)統(tǒng)一配置，在config下新建了webpack.user.conf.js，再分別和build/webpack.dev.js/build/webpack.prod.js merge，因此頁(yè)面的配置，基本都在webpack.user.conf.js進(jìn)行。

配置項(xiàng)

context: 設(shè)置在package.json所在的根目錄

entry: 設(shè)置為src/entry/

ouput: 生產(chǎn)環(huán)境設(shè)置為/src/dist/，開發(fā)環(huán)境默認(rèn)打包后放在內(nèi)存中，不代表實(shí)際物理路徑，output具體配置：

output: {
    path: path.resolve(__dirname, "../dist"),
    filename: "static/js/[name].[chunkhash:16].js",
    chunkFilename: "static/js/[id].[chunkhash:16].js",
    publicPath: "/pailifan/"
}

plugins: 插件配置

HtmlWebpackPlugin: new多個(gè)實(shí)例，每個(gè)實(shí)例對(duì)應(yīng)一個(gè)單頁(yè)

CommonsChunkPlugin: 公共模塊提取打包，默認(rèn)指定將[vue.js -v2.5.2, vue-router.js -v3.0.1]打包，同時(shí)設(shè)置minChunks為Infinity以防止其他公用模塊被打包進(jìn)來

new webpack.optimize.CommonsChunkPlugin({
    name: "vendor",         /*在entry中指定vendor對(duì)應(yīng)的模塊為[vue.js,vue-router.js]*/
    filename: "static/js/vendor.[chunkhash:16].js",
    minChunks: Infinity
})

拉取代碼

切換到package.json所在根目錄，執(zhí)行npm i && npm run dev

新建頁(yè)面（見目錄結(jié)構(gòu)部分的例）或者修改

提交代碼，忽略目錄包括src/dist、src/node_modules

內(nèi)測(cè)/外測(cè)/灰度/生產(chǎn)，執(zhí)行npm i && npm run build，生產(chǎn)環(huán)境不能直接操作dist目錄（npm run build實(shí)際會(huì)先刪除dist目錄再生成，直接操作會(huì)導(dǎo)致發(fā)布時(shí)文件404），需先在發(fā)布機(jī)生成dist后覆蓋到生產(chǎn)服務(wù)器對(duì)應(yīng)的dist目錄

版本回退，回退代碼，然后執(zhí)行npm i && npm run build，同發(fā)布一致

axios: ajax庫(kù)，部分坑已經(jīng)另一篇筆記中進(jìn)行了解釋及提出解決方案

vue-touch: 手勢(shì)庫(kù)

es6-promise: 對(duì)Promise進(jìn)行pollyfill

附: vue-cli + es6 + axios項(xiàng)目踩坑
附：webpack.user.conf.js，會(huì)在webpack.base.conf.js、webpack.dev.conf.js和webpack.dev.prod.js進(jìn)行merge合并

const path = require("path")
const fs = require("fs")
const webpack = require("webpack")
const merge = require("webpack-merge")
const HtmlWebpackPlugin = require("html-webpack-plugin")

const config = require("../config")

const defaultHtmlWebpackConfig = {
    template: "./src/template/index.html"
    minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true
    },
    chunksSortMode: "dependency"
}

module.exports = {

    context: path.resolve(__dirname, "../"),
    output: {
        path: path.resolve(__dirname, "../dist"),
        filename: "static/js/[name].[chunkhash:16].js",
        chunkFilename: "static/js/[id].[chunkhash:16].js",
        publicPath: "/"
    },
    CommonsChunkPlugin: {
        Dev: [
            new webpack.optimize.CommonsChunkPlugin({
                name: "vendor",
                filename: "vendor.js",
                minChunks: Infinity
            })
        ],
        Prod: [
            new webpack.optimize.CommonsChunkPlugin({
                name: "vendor",
                filename: "static/js/common/vendor.[chunkhash:16].js",
                minChunks: Infinity
            })
        ]
    },
    entry: {
        vendor: ["vue", "vue-router", "es6-promise"],
        index: "./src/entry/index/index.js",
        login: "./src/entry/center/login.js"
    },
    HtmlWebpackPlugin: [
        // 首頁(yè)：index.html
        new HtmlWebpackPlugin(merge(defaultHtmlWebpackConfig, {
            title: "首頁(yè)",
            filename: path.resolve(__dirname, "../dist/index.html"),
            chunks: ["vendor", "index"]
        })),
        // 登錄注冊(cè)頁(yè)：center/login.html
        new HtmlWebpackPlugin(merge(defaultHtmlWebpackConfig, {
            title: "登錄",
            filename: path.resolve(__dirname, "../dist/center/login.html"),
            chunks: ["vendor", "login"]
        }))
    ]
}