webpack简介
一、为什么要使用webpack？
webpack中文链接地址：https://www.webpackjs.com/
现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法
- 模块化，让我们可以把复杂的程序细化为小的文件；
- 类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能转换为JavaScript文件使浏览器可以识别；
- Scss，less等CSS预处理器
- ...
这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别，而手动处理又是非常繁琐的，这就为WebPack类的工具的出现提供了需求。
二、什么是webpack
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到]avaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。
简单理解：把webpack理解为一个模板打包机器
三、babel在线工具
babel在线地址：https://babeljs.io/repl
这个是解析我们es6的代码的，为什么要用它呢，因为对于一些ie浏览器，甚至FF浏览器，低版本的还不能识别我们的es6代码，那么vue里面好多还让我们去写es6的代码，这个时候我们就可以用babel这个工具将我们的es6的代码转译成浏览器能识别的代码
左边是我们写的es6代码，右边是通过babel这个工具编译之后的代码。这个代码能在我们各个浏览器中去识别。
所以我们成为babel，是用于编写下一代JavaScript的编译器。
四、模块化
在前端中一个js文件就是一个模块，在js中没有模块化的概念。
目前有四种模块化的方法
1.Commonjs
2.AMD
3.CMD
4.ES6Module
es6Module 支持import和export。跟python的import很像。但它必须在服务器环境下才支持，或者我们可能通过webpack的babel-loader将es6支持转化成es6的语言。
五、什么是webpack?
webpack是一个模块打包工具。
用vue项目来举例：浏览器它是只认识js，不认识vue的。而我们写的代码后缀大多是.vue的，在每个.vue文件中都可能html、js、css甚至是图片资源；并且由于组件化，这些.vue文件之间还有错综复杂的关系。所以项目要被浏览器识别，我们就要使用webpack将它们打包成js文件以及相应的资源文件。
六、webpack的功能？
1、它可以吧CSS，JS图片当做模块来处理
2、它可以吧以上的这些文件进行打包压缩成一个JS文件，减少了HTTP的请求
3、根据模块之间的依赖关系进行分析，按需加载
4、可以安装一些插件，对插件进行打包处理
七、安装
npm install webpack -g(全局的安装)
webpack -v #查看是否安装成功
打包的方式：
1.手动打包：
a.js webpack a.js /test/a2.js
八、webpack的简单使用
这里我们来理解下webpack是如何打包的
app/a.js
var tcl = "this is webpack test"; console.log(tcl);
require('style-loader!css-loader!./a.css');
执行命令
webpack app/a.js public/b.js 、//意思是吧app下的a.js打包在public下的b.js
就会自动生成一个b.js的文件，现在就可以使用并导入了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
this is div test
</div>
<script src="bundle.js"></script>
</body>
</html>
