手动搭建webpack4.x+vue2.x 基础结构

近几年，web前端发展越来越蓬勃，技术也在日新月异。框架和构建工具也层出不穷。前段时间，我所在的公司要求开发app，基于vue+apicloud框架和工具。
由于时间因素，vue环境的搭建是基于wepack提供的vue-cli 脚手架，同时我从来没有接触过构建工具，直到app开发完成上架，都是一步一步慢慢摸索。目前抽空自己学习搭建webpack4.x+vue2.x 基础结构，现在分享一下我的学习过程：
webpack首先是个模块打包工具，会将我们的资源文件模块化打包成我们需要的文件。废话不多说，我们开始吧。
第一步，初始化我们的项目。
进入cmd 在我们项目空文件夹里 npm init，完成之后文件夹中会出现一个 package.json，先放着。
第二步，安装我们需要的webpack工具模块。
全局安装webpack模块 npm install webpack -g；
注意webpack4.x需要安装webpack-cli,不安装，运行的时候也会提示你安装的。
npm install webpack-cli -g；
安装完，我们测试一下。随便建立一个test.js，运行 webpack test.js -o test2.js，test2.js生成成功，则说明我们webpack安装完成。
第三步，在我们文件夹中建立一个webpack.config.js。这个js是weback运行时默认的开始文件，就像gulp中的gulpfile.js一样。
第四步，建立我们的项目目录，首先我们建立src 文件夹，这里我们开发文件夹，我们开发时所有代码都将在src文件夹中完成。src里面我们再建ind