概念：
webpack 是帮助前端进行模块化的打包工具，在ES6之前，要想进行模块化开发，就必须借助其他的工具，比如目前使用的前端模块化的方案：AMD、CMD、CommonJS,(ES6目前也带模块化了)，而这些模块化方案是无法被浏览器识别的，并且通过模块化开发完成项目之后，还需要处理模块间的各种依赖，并且将其进行整合打包。而webpack其中一个核心就是让我们能进行模块化开发，并且会帮助我们处理模块间的依赖关系。这就是webpack中模块化的概念。
如何理解打包：
打包就是将webpack中的各种资源模块进行打包合并成一个或多个包（bundle），并且在打包过程中，还可以对资源进行处理，比如压缩图片，将scss转成css，将ES6语法转成ES5语法（兼容不同浏览器），将Typescript转成JavaScript等等操作。
使用：
webpack的运行必须依赖node.js环境
node环境为了可以正常的执行很多代码，其中必须包含各种依赖的包，因此node环境自带了一个包管理工具npm，使用npm来管理各种包。
可以使用npm 安装webpack
命令：npm install [email protected] -g
@是指定版本， -g是指全局安装在所有位置都可以使用。
未使用模块化开发时：
我们需要将src目录下的js文件分别引入，而且引入顺序、不同js中变量定义都要考虑。
当使用commonJS进行模块化的时候，每个文件都可以看成是一个模块：
对于math.js：
使用commonJS规范进行模块定义及模块标识（就是将模块导出，暴露出去）：
如果我们想在main.js里面使用add函数：
这时通过commom.JS已经实现的模块化，但是我们却没法直接在浏览器里查看，因为浏览器不认识common.js的规范，所以我们可以使用webpack将main.js文件进行打包成浏览器认识的js文件，然后再在index.html中引入打包后的文件就可以查看了。
webpack打包命令：
打包的时候直接打包main.js文件就行，它会自动处理里面引入的模块文件以及模块之间的依赖，所以每次打包入口文件就好了。
打包结果：生成了bundle.js文件
然后在index里面引入bundle文件就可以在浏览器中运行显示结果了
所以我们开发的时候直接在src里面添加文件就行，使用什么模块化规范都可以，开发结束使用webpack打包就可以了。
例如：
新建一个js文件，使用ES6语法导出：
然后在main.js里导入：
再使用webpack重新打包一下,可以看到使用ES6的模块化方式也可以正常使用：
