webpack是一个现代JavaScript应用程序的模块打包器。当webpack处理应用程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每一个模块。然后将所有这些模块打包成少量的bundle-通常只有一个，由浏览器加载。
它是高度可配置的，但是，但是，在开始前你需要先理解四个核心概念：入口（entry） 输出 （output）loader 插件（plugins）
它做的事情是，分析你的项目结构，找到javascript模块以及其他的一些浏览器不能直接运营的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js）,Webpack将从这个文件开始找到你的项目的所有的依赖文件，使用loaders处理它们，最后打包一个（或多个）浏览器可识别的javascript文件。
入口【entry】
webpack创建应用程序所有依赖的关系图，图的起点被称之为入口文件，入口起点告诉webpack从哪里开始，并根据依赖关系图确定需要打包的内容。可以将应用程序的入口起点认为是根上下文或app第一个启动文件。
在webpack打包的时候，可以在js文件中混用require和export。但是不能混用import以及module.exports;
因为webpack2中不允许混用import和module.exports,解决办法就是统一改成ES6的方式编写即可。
错误的写法：
import {demo} form ‘./tool’;
module.exports={demo};
正确的写法：
import {demo} from ‘./tool’;
export default demo;
Loaders
Loaders 是webpack提供的最激动人心的功能之一了。通过使用不同的loader，webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理。比如说分析转换scss为css，或者把下一代的JS文件（ES6，ES7)转换为现代浏览器兼容的JS文件，对React的开发而言，合适的Loaders可以把React的中用到的JSX文件转换为JS文件。
Loaders需要单独安装并且需要在webpack.config.js中的modules关键字进行配置，Loaders的配置包括以下几方面：
test：一个用以匹配loaders所处理文件的拓展名的正则表达式(必须)
loaders：loader的名称（必须）
include/exclude：手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）
query:为loaders提供额外的设置选项（可选）
Babel
Babel其实是一个编译javascript的平台，它可以编译代码帮你达到以下目的：
让你能使用最新的javascript代码（ES6，ES7...）,而不用管新标准是否被当前使用的浏览器完全支持
让你能使用基于javascript进行了拓展的语言 ，比如Rect的JSX
Babel的安装与配置
Babel其实是几个模块化的包，其核心功能位于称为babel-core的npm包中，webpack可以把其不同的包整合在一起使用，对于每一个你需要的功能或拓展，你都需要安装单独的包。
Webpack有一个不可不说的优点，它把所有的文件都当做模板进行处理，javascript代码，css和fonts以及图片等等通过合适的loader都可以被处理。
css
webpack提供两个工具处理样式表，css-loader和style-loader，二者处理的任务不同，css-loader使你能够使用类似@import和url(...)的方法实现require()的功能，style-loader将所有的计算后的样式
插件（Plugins）
插件是用来拓展Webpack功能的，他们会在整个构建过程中生效，执行相关的任务。
Loaders和Plugins常常被混淆，但是他们其实是完全不同的东西，可以这么来说，loaders是在打包构建过程中用来处理源文件的。一次处理一个，插件并不直接操作单个文件，它直接对真个构建过程起作用。
使用插件的方法：
要使用某个插件，我们需要通过npm安装它，然后要做的就是在webpack配置中的plugins关键部分添加该插件的一个实例（plugins 是一个数组）
demo:
module.exports={
plugins:[
new webpack.BannerPlugin()
]
}
这就是webpack插件的基础用法了。
HtmlWebpackPlugin
这个插件的作用是依据一个简单的index.html 模板，生成一个自动引用你打包后的JS文件的 新的index.htno。这在每次生成的js文件名称不同时非常有用
安装
npm install --save-dev html-webpack-plugin
new webpack.HotModuleReplacementPlugin()//热加载插件