对webpack原理、加载器、代码分割、实时编译打包进行一系列总结
webpack
webpack是近期最火的一款模块加载器兼打包工具，它能把各种资源，例如JS（含JSX）、coffee、样式（含less/sass）、图片等都作为模块来使用和处理，基于commonjs规范，使用require加载模块。并且与React和Redux完美结合，主要用于单页面开发。
为什么要用webpack
1.与react一类模块化开发的框架搭配着用比较好。
2.属于配置型的构建工具，比较用容易上手，160行代码可大致实现gulp400行才能实现的功能。
3.webpack使用内存来对构建内容进行缓存，构建过程中会比较快。
4.将资源分割成更小的易于管理的模块，达到复用的目的。
核心原理
1.一切皆模块
正如js文件可以是一个“模块（module）”一样，其他的（如css、image或html）文件也可视作模 块。因此，你可以require(‘myJSfile.js’)亦可以require(‘myCSSfile.css’)。这意味着我们可以将事物（业务）分割成更小的易于管理的片段，从而达到重复利用等的目的。
2.按需加载
传统的模块打包工具（module bundlers）最终将所有的模块编译生成一个庞大的bundle.js文件。但是在真实的app里边，“bundle.js”文件可能有10M到15M之大可能会导致应用一直处于加载中状态。因此Webpack使用许多特性来分割代码然后生成多个“bundle”文件，而且异步加载部分代码以实现按需加载。
特色
1.分块打包。可以提取公共模块，增加复用性。
2.将css打包在js里动态去添加到dom文档中去，将外部样式转化成内嵌样式，减少请求次数。同时也可使用
3.webpack根据入口文件处理内部的依赖，最终打包到output目录里面去
与gulp的区别
虽然gulp也用到了流(pipe)这样的内存处理方式，但感觉webpack更进一步。gulp是每一个任务(task)用一个流，而webpack是共享一个流。同时webpack加载器在按顺序处理文件的步骤上进行了简化。
模块化处理
使用Commonjs规范require模块，模块化的不仅仅是js，也可以是css、图片
将css转化成内联样式，减少请求次数.甚至css都是打包在js里去动态添加到dom文档中去。
加载器
使用加载器对特定的文件进行处理
加载器符合链式调用规范。多个loader可以用在同一个文件上并且被链式调用。链式调用时从右到左执行且loader之间用“!”来分割。
常用加载器
style-loader:接受JSON值然后添加一个style标签并将其内嵌到html文件里
url-loader:将图片在规定的大小范围内使用data-url替换(图片转base64)
babel-loader:将es6语法转化成es5语法，避免presets配置过多，可将配置放到.babelrc文件中
插件
uglifyJSPlugin:获取bundle.js然后压缩和混淆内容以减小文件体积。
extract-text-webpack-plugin:内部使用css-loader和style-loader来收集所有的css到一个地方最终将结果提取结果到一个独立的”styles.css“文件，并且在html里边引用style.css文件。分割css资源。
commonschunkplugin:分割公有。对代码进行分割，使首次加载尽可能快速。
html-webpack-plugin:生成html文件。
html-loader:解决了webpack不能编译html上引用的图片
HotModuleReplacementPlugin: 代码热替换
ProvidePlugin:调用模块别名，例如想在js中用$，如果通过webpack加载，需要将$与jQuery对应起来
webpack-dev-server
webpack服务器，提供文件监听并实时打包.
热更新“Live Reload”以及热替换“Hot Module Replacement”（即HMR)即尝试重新加载组件改变的部分（而不是重新加载整个页面)当资源改变时，webpack-dev-server将会先尝试HRM（即热替换），如果失败则重新加载整个入口页面。
webpack-dev-server是一个小型的node.js Express服务器,它使用webpack-dev-middleware中间件来为通过webpack打包生成的资源文件提供Web服务。它还有一个通过Socket.IO连接着webpack-dev-server服务器的小型运行时程序。webpack-dev-server发送关于编译状态的消息到客户端，客户端根据消息作出响应。
webpack-dev-server教程:
个人遇到的问题
尝试对html上引入的图片进行base64转换，使用了html-loader加载器和html-webpack-plugin插件，发现只能将html模板打包成html文件才能成功转换。因为webpack要有打包入口文件，并且要有一个html引入这个入口文件。
参考资料
webpack入门教程
webpack解决方案
html-webpack-plugin
基于webpack的前端工程化开发之多页站点
webpack按需加载