一步一步使用webpack搭建项目
MPA |-src
|-main.js 项目打包的入口文件
|-App.vue 项目的根组件（项目一启动，见到的第一个页面）
|-package.json 项目的描述文件，用于记录安装了哪些包
|-webpack.config.dev.js 开发阶段webpack的配置文件
切换到根目录，使用 npm init -y 生成package.json
tips:vue项目跟react项目目录结构基本一致
二:
webpack-dev-server :【内部开启了一个node服务】
开发阶段使用，它是在webpack基础上又封装了一把，webpack有的功能它都有，并且
还拓展了一些，打包生成的bundle.js及index.html都是发布到它内部开启的node服务
上面去了
webpack：生产阶段，它是在整个项目做完了之后，接下来，打包生成可以上线的
静态资源
注意：webpack的版本和webpack-dev-server的版本是需要对应的，否则会报错
webpack 3.x版本 对应 webpack-dev-server2.x
webpack 4.x版本 对应 webpack-dev-server3.x
三：
package.json 和 package-lock.json 作用分析
1.package.json 文件里记录有项目所安装的依赖项，当 node_modules 被删除时，可以再根据该文件安装所需的依赖项；
2.npm 5 以前不会有 package-lock.json 这个文件，npm5 之后才加入这个文件；
3.当安装包的时候，npm 都会生成或者更新 package-lock.json 这个文件；
4.npm 5 之后的版本安装包的时候不需要加 --save 参数，它会自动保存依赖的信息；
5.当安装包的时候，会自动创建或者更新 package-lock.json 文件；
6.package-lock.json 文件会保存 node_modules 中所有包的信息（版本、下载地址），重新 npm install 的时候速度会提升；
7.文件的名称有 lock ，表示该文件可以用来锁定版本号，防止自动升级新版。
四：
html-webpack-plugin
以一个参考文件为模版，生成index.html，并且会自动发布到webpack-dev-server开启的node
服务上面去
参考:https://github.com/jantimon/html-webpack-plugin
步骤:
1、在根目录下面，创建一个template.html，里面写上id=app的div
2、在webpack.config.dev.js中的plugins中写代码
webpack-dev-server
放在package.json中的scripts中去
webpack-dev-server --progress --config webpack.config.dev.js --port 6008 --open --hot
--port 指定node服务运行的端口号
--open 把我们项目运行在浏览器中，并且自动打开浏览器
--hot 实现热重载/热替换/热更新/热加载
最终运行，切换到根目录，运行 npm run dev
五：
第一次安装
包:vue
应用场景:我们要去运行App.vue
安装方式：npm i vue -S
第二次安装
包:vue-loader vue-template-compiler css-loader style-loader
应用场景:我们要打包.vue结尾的文件
安装方式：npm i vue-loader vue-template-compiler css-loader style-loader -D
第三次安装
包:html-webpack-plugin webpack@3.11.0 webapck-dev-server@2.11.1
应用场景:我们到时候运行打包出来的bundle.js
安装方式:npm i html-webpack-plugin webpack@3.11.0 webpack-dev-server@2.11.2 -D
