vue项目构建过程

# template 模版项目

> A Vue.js project
* 构建过程
* 安装过程
* 差异点
* 打包优化

## 构建过程
```bash
bogon:vue-cli caoke$ vue init webpack template

? Project name template
? Project description A Vue.js project
? Author caoke <caoke@caoke.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

   vue-cli · Generated "template".

# Installing project dependencies ...
# ========================
```

## 1、安装过程

``` bash
# 安装依赖
npm install

# 启动热服务 localhost:8080
npm run dev

# 压缩打包
npm run build

# 压缩打包 and 查看打包分析图
npm run build --report

# 打包成测试环境
 "deployTest": "cross-env assetsPublicPath=//zx.test.17zuoye.net/ node build/build.js",

# 打包成线上环境
"deployOnline": "cross-env assetsPublicPath=//www.17zuoye.com/ node build/build.js",

```
### 2、差异点
2-1:新建目录
```
/src/api 服务接口口请求
/src/assets png、js、css资源存放
/src/common 公用资源
/src/components 项目内部组件
/src/directive vue指令
/src/entry 入口js
/src/marvel 第三份公用组件库
/src/models 数据模型
/src/router 路由
/src/utils 公用工具
/src/views 页面

```
2-2:package.json
```
  "axios": "^0.18.0",
  "element-ui": "^2.3.8",
  "glob": "^7.1.2",
  "less": "^3.0.2",
  "less-loader": "^4.1.0",
  "node-sass": "^4.9.0",
  "photoswipe": "^4.1.2",
  "qs": "^6.5.2",
  "sass-loader": "^7.0.1",
  "stylus": "^0.54.5",
  "stylus-loader": "^3.0.2",
  "text-loader": "^0.0.1",
  "vue-markdown": "^2.2.4",
```

2-3:webpack.prod.conf.js 自动配置entry，看打包优化部分
```
const test = require('./better');

const entry=test.getproEntry()
const htmlConfig=test.getproHtmlWebpack();
const commonsConfig=test.getCommonsChunk();

 entry: entry,

   chunkFilename: utils.assetsPath('js/[name].[chunkhash].js')

    ...htmlConfig,
    ...commonsConfig,

    // new webpack.optimize.CommonsChunkPlugin({
    //   name: 'vendor',
    //   minChunks (module) {
    //     // any required modules inside node_modules are extracted to vendor
    //     return (
    //       module.resource &&
    //       /\.js$/.test(module.resource) &&
    //       module.resource.indexOf(
    //         path.join(__dirname, '../node_modules')
    //       ) === 0
    //     )
    //   }
    // }),

   // new webpack.optimize.CommonsChunkPlugin({
    //   name: 'manifest',
    //   minChunks: Infinity
    // }),

```
2-4:webpack.dev.conf.js 自动配置entry
```
const test = require('./better');

const entry=test.getdevEntry()

const htmlConfig=test.getdevHtmlWebpack();

  entry: entry,

 ...htmlConfig,

```
2-4:vue-loader.conf.js
```
esModule: false
```

2-5:config/index.js
```
const productName = require('../package').name||'template';
 dev: {

    // Paths
    assetsSubDirectory: productName,
    assetsPublicPath: '/',
    proxyTable: {
      /*
      域名:https://www.easy-mock.com/
      用户名:caoke
      密码:123456
      * */
      '/api': {
        target: 'https://www.easy-mock.com/', // 接口的域名
        secure: false,  // 如果是https接口，需要配置这个参数
        changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
        pathRewrite: {
          '/api': '/mock/596f19b1a1d30433d837ad7d/example'
        }
      }

    },

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../../dist/'+productName+'/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../../dist'),
    assetsSubDirectory: productName,
    assetsPublicPath: '/',

productionSourceMap: false,

```

## 3、自动配置和打包优化
* 3-1:根据entry目录，自动配置入口和html，以dev开头的文件不会发布到生产环境.
* 3-2:以公共文件名开头的文件，回生产公共文件。如a.demo.js、b.demo.js生产公共文件a.js。
* 3-3:子目录也遵循上述规范，也会生产对应的html、js、公共文件
* 3-3:在better.js手动配置公共的js，格式如下
```
const commonConfig={
  'demo':['demo1','demo2'],//demo1、demo2的公共demo.js
  // 'vendor':true,//所有页面的公共demo.js
}
```

build/better.js

```
//打包优化配置
const glob = require('glob');
const path = require('path');
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const productName = require('../package').name||'template';
/*
* a.demo1.js、a.demo2.js
* 表示存在公共的a.js,
* 会生产 a.[md5].js a.demo1.[md5].js a.demo2.[md5].js 3个文件
*
* */
//公共模块的配置
const commonConfig=getcommons();

function getcommons(){
  const obj=getproEntry();
  const commonCache={}
  const commonConfig={}
  for(let ke in obj){
    ke.replace(/([a-z]+)\./i,function (m,p1) {
      if(!commonCache[p1]){commonCache[p1]=[];}
      commonCache[p1].push(ke)
      if(commonCache[p1].length==2){
        commonConfig[p1]=commonCache[p1]
      }
    })
  }

  return commonConfig;
}
function getCommonsChunk() {
  const data=[]
  for(let name in commonConfig){
    if(Array.isArray(commonConfig[name])){
      data.push(
        new webpack.optimize.CommonsChunkPlugin({
          name: name,
          minChunks:2,
          chunks:commonConfig[name]
        }))
    }
  }
  return data;
}

function getCommonBy(cname) {
  const commons=[]
  for(let name in commonConfig){
    if(commonConfig[name].length>0&&commonConfig[name].indexOf(cname)>-1){
      commons.push(name)
    }
  }
  return commons;
}
/*
  获取入口entry的所有js文件
 */
function getdevEntry() {
  const arr = glob.sync(__dirname+'/../src/entry/**/*.js')

  const entry={}
  arr.forEach(function (file) {
    file.replace(/entry\/(.+)\.js$/,function (m,p1) {
      entry[p1]=file
    })
  })
  return entry;
}
//获取生产环境入口配置
function getproEntry() {
  const arr = glob.sync(__dirname+'/../src/entry/**/!(dev.)*.js')

  const entry={}
  arr.forEach(function (file) {
    file.replace(/entry\/(.+)\.js$/,function (m,p1) {
      entry[p1]=file
    })
  })

  return entry;
}

/*
  生产html配置
 */
function getdevHtmlWebpack() {
  const entry=getdevEntry();
  const htmlConfig=[]
  for(let name in entry){
    htmlConfig.push(new HtmlWebpackPlugin({
      title:name,
      filename: productName+'/'+name+'.html',
      template: 'index.html',
      inject: true,
      chunks:[name],
      chunksSortMode: 'dependency'
    }))
  }
  return htmlConfig;
}
function getproHtmlWebpack() {
  const entry=getproEntry();
  const htmlConfig=[]

  for(let name in entry){
    const cmchunks=getCommonBy(name);
    htmlConfig.push(new HtmlWebpackPlugin({
      title:name,
      filename: path.resolve(__dirname, '../../dist/'+productName+'/'+name+'.html'),
      template: 'index.html',
      inject: true,
      minify: {
        removeComments: true,
        // collapseWhitespace: true,
        removeAttributeQuotes: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      chunks:[...cmchunks,name],
      chunksSortMode: 'manual'
    }))
  }
  return htmlConfig;
}
module.exports={
  getdevEntry,//自动配置开发环境入口
  getproEntry,//自动配置生产环境入口
  getdevHtmlWebpack,//自动配置开发环境html
  getproHtmlWebpack,//自动配置生产环境入口
  getCommonsChunk,//自动配置生产环境公共资源
};

```

## 4、入口模板
```
//引入公共配置
import Vue from '../common/pcbase';
/*
  2、注册 组件容器
  展示组件的容器
* */
Vue.component('card', require('../components/card.vue'));

//1、导入elm ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI, { size: 'small' });

//项目的入口
import App from '../views/demo2'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: ' <div><mv-modal></mv-modal><App/></div>'
})

```
## 5、打包构建速度优化
使用多线程压缩打包插件 webpack-parallel-uglify-plugin
```
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')

 new AssetsPlugin({
      prettyPrint:true,
      fullpath:true
    }),
    new ParallelUglifyPlugin({
      cacheDir: '.cache/',
      uglifyJS:{
        output: {
          comments: false
        },
        compress: {
          warnings: false
        }
      }
    }),
```
## 6、本地mock
原理：路由的rewrite，以及代理插件
1、是否以http开头，用代理转发到url
2、以"/"开头，则在本地目录查找，是否存在该文件，返回该文件的json数据
3、不存在就做路由转发
```
module.exports=[
  {

    //本地的url =》 本地的url
    // "/":"/mteacher/tcbag.html",
  },{
    //线上的url =》 本地的mock
    "/ok":"/ok",
  }
]

```