webpack 之vue多页面打包（一）（脚手架） 一招学会常年无忧

简要说明

本项目基于webpack 打包 vue 开发多页应用，涉及内容各种组件的相互关系，本地开发，测试环境的使用，生产环境的部署，其中包括eslint，webpack插件的使用，和移动端端像素问题，ajax的请求问题处理，内容错综复杂，当然在一个公司你只有部署一次就可以，一次学会10年无忧。
说的简单点就是手动搭建一个多页面脚手架
因此在阅读这篇文章。你需要提前具备或者安装好node npm 基础的东西，需要掌握webpack的基础。node 打包中的常用命令，就可以跟着我一步一步见证多页面是多么舒服的开发。
预期实现功能：

1. 实现多页面打包
2. 不同环境打包代码
3. js 的公用代码处理机制
4. css 的公用代码处理机制
5. js，css，img压缩抽离机制
6. eslint 的配置
7. 打包环境优化配置happypack的使用
8. 动态域名目录配置

VUE 项目多页面结构

目录结构

   MUZI    // 项目名称
     build	// 放置webpack配置 文件夹
       	webpack.base.config.js		// webpack配置 公用基础文件
      	webpack.dev.config.js		// webpack配置 开发环境配置
      	webpack.pro.config.js		// webpack配置 生产环境配置
       	webpack.test.config.js		// webpack配置 测试环境配置
     src						//开发源文件 存放
     	assets					// 存放公用的js和css文件
     		common				// 存放公用和通用的js
	   			http		    // 存放 关于请求的统一封装	
	   			   utils		// 公用的工具函数
	   			      index.js  // 公用函数的具体文件 用index.js 命名，引入的时候可以省略。
	   			   index.js		// ajax情况的公用处理
	   			page-setup		// 初始化的页面配置
	   			  index.js	
	   			common.js  
     		css
     		  common.less	
     	components
     	directives
     	filters
     	page
     	   demo
     	   singe
     .babelrc
     package.json			// 生产环境和开发环境需要的更重包管理
     postcss.config.js 		// postcss 是帮我们后处理css
     README.md   			// 记录开发 迭代事项

来看一下图片结构

webpack 配置内容

build 这个目录设计存放webpack的打包配置文件，设计思路，webpack 拆分不同环境打包，但是基础配置是一样的，我们单独拿出一个js文件编写基础配置，然后不同环境的打包方式基于基础js文件开发，方便升级维护，每个坏境特殊的地方，单独编写；
在操作过程中不够到包需要自己下载哦

基础公用配置

node 基础补充：

• require 加载文件的方法
• fs 模块文件系统工具
• os 模块提供了一些基本的系统操作函数
• glob 模块内部使用了minimatch来匹配文件
• path 模块提供了一些用于处理文件路径的小工具
• 全局变量 __dirname 表示当前执行脚本所在的目录。

path.join([…path]) 方法

path.join('/目录'，'目录1','..','src');
// 返回：   ’/目录/src'

因此我们获取开发源码目录这样写，定义一个方法，方便管理，动态指定 源文件目录

let resolve = function (dir) {
   
  return path.join(__dirname, '..', dir);
};
const srcPath = resolve('src'); //返回：  /MUZI/src

动态获取子项目目录一级或者二级：
我们用match 非全局模式 正则使用贪心模式：

let s= 'src/page/margintrading/success/main.html'.match(/page\/(.+)\/main.html$/);
console.log(s[1]); // margintrading/success
let s= 'src/page/login/main.html'.match(/page\/(.+)\/main.html$/);
console.log(s[1]); // login

判断文件是否存在
使用node fs.existsSync 方法

   fs.existsSync(path)
   // 判断一个系统文件是否存在，存在返回true 不存在返回false

html-webpack-plugin插件
主要两个作用：一为html文件动态引入外部资源；二，创建html文件入口，我们是搭建多页面入口因此我们提供公用方法循环创建
打包之后文件管理
打包完成之后我们放到指定地方，如果不清理，会叠加很多，需要清理使用
CleanWebpackPlugin 进行处理
基础公用配置需要完成的事情

1. 入口到配置
2. 打包代码清理
3. 所有环境都用到到公用插件包括优化
4. 公用css 到加载

webpack.base.config.js

/*
 * @Description: 公用基础配置
 */
const CleanWebpackPlugin = require('clean-webpack-plugin');
const fs = require('fs');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// const Uglifyjs = require('uglifyjs-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); // 压缩css
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const eslintFriendlyFormatter = require('eslint-friendly-formatter');
const MinCssExtractPlugin = require('mini-css-extract-plugin'); // 将CSS提取为独立的文件的插件
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const HappyPack = require('happypack');
const os = require('os');
const happyThreadPool = HappyPack.ThreadPool({
    size: os.cpus().length });
const glob = require('glob');
let path = require('path');
let resolve = function (dir) {
   
  return path.join(__dirname, '..',