基於webpack 的 vue 多頁架構

使用vue構建單頁應用已是稀鬆日常的事情了，可是當你遇到相似活動類需求時，每一個活動相對獨立，當活動達到30各以上時，長時間的構建過程會拖慢整個開發週期，並且也是沒必要要的。所以多頁架構應運而生。

腳手架

github地址：git@github.com:lihongbin100/any-page-demo.git

目錄結構

page下包含多個目錄，每一個目錄對應一個項目，都要包含main.js入口文件和app.vue主組件。

配置說明

多頁架構最重要的就是webpack的多target配置，webpack的配置能夠接收一個配置數組，從而一次性對多個項目分別打包。

• 可是如何配置須要打包哪一個項目呢？

package.json文件裏有pages參數，該參數能夠配置page目錄下的任意一個或者多個項目，配置了哪一個項目，就會打包哪一個項目，注意項目名稱要跟目錄名相同，這樣不管是上線，仍是本地開發，都不須要整個項目部署，而是用到哪一個就打包哪一個。

{
  "name": "any-page-demo",
  "version": "1.0.0",
  "description": "多頁面架構demo",
  "main": "app.js",
  "pages": "page1,page2",
  "scripts": {
    "update": "npm --registry=https://registry.npm.taobao.org install -E --unsafe-perm",
    "init": "npm --registry=https://registry.npm.taobao.org install -E --unsafe-perm",
    "release": "npm run clean && webpack --env=prod",
    "test": "rm -rf ./dist && webpack --env=test",
    "dev": "export NODE_ENV=development && node app.js",
    "clean": "rm -rf ./output",
    "lint": "eslint --fix 'src/**/*.vue' 'src/**/*.js'"
  },
  "pre-commit": [
    "lint"
  ],
  ------省略
}

• 打包的核心在於webpack.config.js中配置。最重要的就是下面生成webpack的配置數組。

process.env.npm_package_pages.split(",").forEach(
    (page) => {
      configs.push(merge(common(page), currentConfig(page)))
    }
  )

webpack.config.js

const merge = require('webpack-merge')
const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
var common = (page) => {
  return {
    entry: {
      vendor: [
        'vue',
        'cookies-js',
        'form-urlencoded',
      ],
      main: `src/page/${page}/main.js`
    },
    -------省略
}

module.exports = function (env) {
  let currentConfig = {}
  if (env == "dev") {
    currentConfig = devConfig
  }
  if (env == "test") {
    currentConfig = testConfig
  }
  if (env == "prod") {
    currentConfig = propConfig
  }
  const configs = [] //重點在這
  process.env.npm_package_pages.split(",").forEach(
    (page) => {
      configs.push(merge(common(page), currentConfig(page)))
    }
  )
  return configs
}