目前公司采用的依然是基于webpack3.6.0的项目，因为vuecli3的一些基础配置看不到，又不能直接更改，于是就想自己开发一款vuecli用于公司脚手架的升级。
本文呢主要是想给大家一个启蒙，告诉大家如何做一个vue的脚手架。
1.首先初始话项目
在根目录下建一个src文件夹并建一个main.js
2.开始配置webpack.config.js
- 新建一个build文件夹，用来存放webpack的配置文件
- 新建一个webpack.config.js，配置webpack文件
- 在package.json文件的
- 安装以下依赖 复制下方代码
npm i babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime -Dnpm i @babel/runtime -S
- 在module下的rules里面配置如下
- 在项目根目录添加一个babel.config.js 里面的配置如下
- 运行以下代码就能够转换es5了
4.配置sass转css （我的项目使用scss就只配置了scss）
- 复制粘贴
npm install sass-loader dart-sass css-loader style-loader -D- 这几个loader主要作用就是sass转css 并把css内置到html
- 看下面的webpack配置
5.postcss 实现自动添加css3前缀和雪碧图
- 复制代码
npm install postcss-loader postcss-sprites autoprefixer -D修改配置文件
- 在根目录下新建一个postcss.config.js文件
6.用 html-webpack-plugin创建html页面
- 复制粘贴
npm install html-webpack-plugin -D
- 新建一个public文件，并初始化一个html文件
- 在webpack的配置文件的plugin添加
7.配置热更新
- 复制粘贴
npm install webpack-dev-server -D- 修改配置文件 这个配置比较多上面是devserver配置下边是plugin我会在结尾附上我的github源码地址
8.识别vue
- 复制粘贴
npm install vue-loader vue-template-compiler cache-loader thread-loader -D npm install vue -S
- 上面这几个loader的含义可以直接查是什么意思，这里就不做过多介绍了
- webpack配置如下 alias用于减少node查找文件的时间
- 复制粘贴代码
npm install file-loader url-loader image-webpack-loadersvg-url-loader -D
- 下面是webpack配置 image-webpack-loader 是用来优化图片的
10.区分环境变量
新建4个文件
- webpack.dev.js 开发环境
- webpack.prod.js 生产环境
- webpack.config.dll.js预编译
- build.js 生产环境
- webpack.config.js 公共配置
1.开发环境
- 需要devserver
- 需要sourcemap定位
- 等...
- dll预编译
- css、js需要压缩
- gizp压缩
- 图片的优化、雪碧图（雪碧图慎用，防止图片过大卡死）之类的
- cssnano怎样能够达到最佳优化
- 多线程打包提高速度
- 提高缓存命中
- 以及最新的splitChunks
- 等...........................................
