基于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
}