由于只有不到一下午的时间匆匆赶工出来的，初衷只是一时兴起，所以在种种机缘的情况下发布了第一版供大家使用
奉上git地址
https://github.com/keaderzyp/webpack_cli.git
ssh:[email protected]:keaderzyp/webpack_cli.git
提前说明一下，由于时间比较赶，作者只有mac所以测试也是在mac环境下测试的，虽然node是跨平台的，不过在windows和mac的使用中还是发现了一些区别的，
比如在使用img标签引用图片的时候windows和mac是不太一样的，所以在url-loader这里的配置如果windows用户使用出现了问题请自行修改一下，
后期我会进一步完善这个工具，把它变成一键安装的工具，这里需要大家自行下载并且自行配置，整体必要功能应有尽有。
那么说一下使用前提：
硬件环境：mac或windows（什么电脑都无所谓）
软件环境：需要node开发环境6.3以上npm最好是最新版本的
使用常识：了解node.js基础，有一定的dos或linux或unix操作指令基础，并且熟练使用npm包管理工具，熟悉npm常用指令，懂得系统console的错误调试
有一个类似于hbuilder强大的开发工具，最好就用hubilder这个调试能力和开发能力要比webstorm强很多
那么进入正题
我们拿hbuilder演示一下环境的使用
首先我们从git导入项目
导入成功之后是这个样子的
为了方便我的日后维护，导入成功之后请自行断开git
变成这样之后这个结构就是目前的初始文件结构
public为编译后可以直接使用浏览器执行的项目
routes是node的路由代码
也就是前后端如果你是node栈的程序员都可以直接开发了
如果是对其他后端提供服务那么就可以在编译完成后使用发布指令打包再将public内的文件结构全部取出，就是一套可以独立运行的前端静态项目
而且此工具可以完美的整合vue等其他第三方插件，已经注入了babel依赖，并且可以全局使用es6进行开发，后面会演示
然后我们看一下package.json文件就是这个项目的说明以及依赖
对于java程序员来说他相当于maven的pom.xml文件（这里不得不吐槽一下java的maven如果能有npm百分之10的能力maven的操作方便成都就能提升十倍，真的相比npm差太远了）
吐槽后我们看一下package的内容
这个图中附赠了两条注释也就是项目的启动指令和发布指令
不过要记住
package.json中不可以输入任何的注释，其他的配置文件也有部分不可以使用注释，如果使用就会在启动中报错
这里要注意的就是package中的依赖，这个表有了我们就可以自动安装依赖，不过如果多年以后你才看到了这篇文章那么有部分依赖包可能已经没有了，那就需要自行手动下载了
所以下面执行的就是通过shell命令或cmd命令打开到你的项目根目录下执行 npm install指令来安装依赖
顺利的话看到的就是以上的内容
安装完依赖之后项目会多一个包
这个node_modules内放的就是项目所有的依赖包
以上两步只要没有问题了就可以在控制台中继续执行 生产环境的运行命令npm start 然后神奇的事情就会发生
此时你的控制台会拼命的跑并且给出相应的进度
知道看见webpack启动成功并且下面出现了一段编译报告
这时更方便的事情你的浏览器会自己跳出来并且打开生产环境的欢迎界面
由于时间比较紧所以只能临时对付一个欢迎界面后续的日子一定会换上作者的头像做封面的
看到这个界面后项目结构又发生了大改变
出现了src这个目录并且里面有一些文件，public中也多出了文件
这个src的结构就是我们生产代码所需要的结构那么这个是欢迎界面，
如果是第一次使用的小伙伴可以随便改动网页的内容
但是千万不要动plugin文件夹的hmr.js这个是实现网页热更新的核心代码，所以如果你动了这个就需要手动刷新网页了
不然的话只需要在src的html文件和css还有js文件中做操作，网页就会自动更新了，对于双屏开发者来说就是一个字爽呀
别急，还没完
介绍一下访问规则，浏览器的路径访问规则参考欢迎页面
也就是node的路由帮我们做的转向，所有的html界面一定要放在html文件夹里
只需要在ip端口号后面输入/网页的文件名（不需要后缀就可以访问成功了）
那么关键的一步，很多人的项目会有多个静态页面如果在用新的还得一个一个创建吗
当然既然是工具，在这个生产环境中我又追加了一个叫做page.config.js的文件
打开后你会发现只有一个空的{}
这个文件的使用方式就是用来创建新的页面的，这个灵感来源于小程序开发
微信的小程序开发中新建页面只需要在配置文件中输入新的界面地址就会自动生成多个文件
那么这里的page.config.js也是实现这个功能的比如做如下操作，只需要在json格式中加入自己需要的界面名称
然后只需要按ctrl+s保存
等待一秒之后会发现在你的项目中发生了一些变化
还没完呢，这时只需要在浏览器路径中把后缀改成test再访问
可以直接使用，并且你只需要直接操作代码页面依然会自动刷新。
别急，接下来我们再看一下其他功能
比如，css的兼容性问题会自动生成前缀解决方案，js的es6语法会自动交给babel进行转换
这里再次强调一个使用前提作为webpack使用者，首先必需清楚的一点就是，你写代码使用的文件，并不是浏览器访问的文件，这个如果你是java程序员的话原理和jsp是一样的，你访问的网页并不是你写的jsp文件，在这个环境中，src是我们写代码的地方，而public中的文件才是我们浏览器真正访问和之后我们要使用的地方，所以写代码写在src中，想看代码生成以后的样子去public中对应的文件夹寻找，比如补全的css和编译后的js，这里需要理解项目 欢迎页的图，为什么现在前端可以用ts cs 以及sass less等浏览器不识别的语言开发，不是因为浏览器厉害了，而是通过webpack在开发的过程中他们实际上被转化成了原生的html css js 如图
所以要起码懂webpack才能熟练的使用这个工具
那么我们接下来说一下如果你的代码开发完毕想把界面发布成普通的静态页面，就需要回到系统控制台
然后还是在项目的根目录在服务器停止的情况下使用npm run build指令来打包项目
run build之后不会有任何的界面弹出，他的作用是
去掉webpack在开发中对项目添加的附属功能以及压缩代码
当代码压缩完毕之后，可以直接吧public文件夹内的问价整体拿走，这里的文件就是一套开发完整的静态页面并且可以直接运行了
那么到这为止第一版的工具使用方法已经介绍完毕，如果使用中有一些问题，暂时需要自行的检查，我在后续会对这个github项目进行不定期的更新，会让这个环境更加的完善，并且方便大众进行开发。
最后呢，如果这篇文章看了一遍之后还没有成功的使用这个工具，那么就请再看一遍啦～～