webpack_开发阶段的基础配置、端口、热加载、在内存中生成html页面的插件、样式图片字体加载器、babel；上线阶段（生产环境）的配置...

1、webpack---是一个前端项目构建工具，是基于nodejs开发的，前端工具

　　　　1、产生背景---合并（减少二次请求，提高网页加载速度）、压缩（节省带宽，节约用户流量）

　　　　　base64位编码的好处：编码过后的字符串，这样图片就会随着html代码结构一起下载到客户端，这样第一次请求就能加载到这个图片了而不需要用src属性单独指服务器的一个资源，这样就又是一个请求了（并不是所以的图片都适合，一般是适合小图片）

　　　　　　2、webpack的基本使用

　　　　　　安装：

　　　　　　使用：通过一个小案例体验webpack前端构建工具的基本使用和作用（好处）

　　　　　　　　（打包）减少二次请求，解决包于包之间复杂的依赖关系

　　　　　　　　为了避免每次修改main.js之后都要重新用命名行语句再打包，把新修改的样式生效，所以我们可以自己配置一下文件的入口和出口目录

　　　　　　　3、每次修改代码后都要在命名行输入webpack  打包编译后刷新界面才能看到最新的修改，这样还是很麻烦，所以要借助新的工具实现自动打包编译的功能

　　　　　　4、因为webpack默认只能打包处理js类型的文件，无法处理其他非js类型的文件，如果要处理非js类型的文件（如样式文件）我们需要手动安装一些第3方的loader加载器，装包后再配置

 　　　　　　5、webpack默认无法处理文件中的url地址，不管是图片还是字体库----所以我们又要装第3方loader

 　　　　　　6、webpack默认只能处理一部分es6语法，如import可以但是类不可以，那这时候就又要借助第3方的loader了---Babel（是一个第3方的js编译器）

　　　　　　　　配置babel来处理些高级的js语法

 总结：   

　　　1、npm init  创建包管理文件   package.json

　　　2、创建项目目录文件夹---存放源代码

　　　3、dist文件夹---存放项目打包输出之后的文件（不一定要提前建好，打包的时候发现没有的话也会帮我们自动创建的）

　　　4、可以用webpack命令行测试打包是否可以用了，测试好后再安装下 webpack-dev-server包进行实时打包  ，再创建webpack配置文件webapck.config.js  ，在里面配置下需要配置的入口、出口文件，热加载、loader等

　　　5、装html-webpack-plugin可以帮助我们在内存中生成一个html文件，和自己创建的html内容一模一样，并且生成的html还帮我们引入了bundle.js，所以我们自己的html中不用再引入bundle.js了

　　　6、。。。。。。

--------

　　webpack  生产环境（上线阶段）　的配置

　　　　可以新建一个webpack.pub.config.js  文件

　　　　然后把webapck.config.js文件中内容复制过来，然后在这个配置基础上修改配置项

　　　　　　配置 js css  iamge  分离，压缩js  压缩html  等。。。。

　　　　　最后执行 npm run pub 打包出dist上线版文件夹

　------其实这个上线版本的优化，vue-cli的npm run build  已经做了