vue項目構建過程

# template 模版項目> A Vue.js project* 構建過程* 安裝過程* 差別點* 打包優化## 構建過程```bashbogon: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 ...# ========================```## 一、安裝過程``` bash# 安裝依賴npm install# 啓動熱服務 localhost:8080npm 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-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-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'],//demo一、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,//自動配置生產環境公共資源};```## 四、入口模板```//引入公共配置import Vue from '../common/pcbase';/*  二、註冊 組件容器  展現組件的容器* */Vue.component('card', require('../components/card.vue'));//一、導入elm uiimport 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>'})```## 五、打包構建速度優化使用多線程壓縮打包插件 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        }      }    }),```## 六、本地mock原理：路由的rewrite，以及代理插件一、是否以http開頭，用代理轉發到url二、以"/"開頭，則在本地目錄查找，是否存在該文件，返回該文件的json數據三、不存在就作路由轉發```module.exports=[  {    //本地的url =》 本地的url    // "/":"/mteacher/tcbag.html",  },{    //線上的url =》 本地的mock    "/ok":"/ok",  }]```