webpack
webpack 特点
代码拆分
Webpack 有两种组织模块依赖的方式，同步和异步。异步依赖作为分割点，形成一个新的块。在优化了依赖树后，每一个异步区块都作为一个文件被打包。
Loader
Webpack 本身只能处理原生的 JavaScript 模块，但是 loader 转换器可以将各种类型的资源转换成 JavaScript 模块。这样，任何资源都可以成为 Webpack 可以处理的模块。
智能解析
Webpack 有一个智能解析器，几乎可以处理任何第三方库，无论它们的模块形式是 CommonJS、 AMD 还是普通的 JS 文件。甚至在加载依赖的时候，允许使用动态表达式 require("./templates/" + name + ".jade")。
插件系统
Webpack 还有一个功能丰富的插件系统。大多数内容功能都是基于这个插件系统运行的，还可以开发和使用开源的 Webpack 插件，来满足各式各样的需求。
快速运行
Webpack 使用异步 I/O 和多级缓存提高运行效率，这使得 Webpack 能够以令人难以置信的速度快速增量编译。
总结下来其主要的优势：
- 按需加载模块，按需进行懒加载，在实际用到某些模块的时候再增量更新
- webpack 是以 commonJS 的形式来书写脚本，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。
- 能被模块化的不仅仅是 JS 了，能处理各种类型的资源。
- 开发便捷，能替代部分 grunt/gulp 的工作，比如打包、压缩混淆、图片转base64等。
- 扩展性强，插件机制完善
webpack的使用
1、进入我们的项目目录webpack-test，初始化npm
npm init执行这个命令，会要求我们输入name、version、description等，也可以不填，一路回车。
最后会在目录下生成一个package.json文件（我们现在不介绍这个文件）。
2、安装webpack
npm install webpack --save-dev这命令执行完成之后，我们的webpack-test目录下，会多一个node_modules文件夹。
3、小试牛刀（看看webpack打包到底是个啥）
在根目录下新建一个hello.js文件，代码如下：
//这里代码不重要，只是为了演示
function hello(){
alert('hello');
}
hello();然后我们用webpack来打包这个hello.js文件，看看打包之后是个啥。
执行命令：
webpack hello.js hello.bundle.js
#webpack [要打包的文件名] [打包之后的文件名]执行上面打包命令成功之后，终端会提示如下内容：
Hash: ffb542f388f3028d0787
Version: webpack 2.2.1
Time: 59ms
Asset Size Chunks Chunk Names
hello.bundle.js 2.58 kB 0 [emitted] main
[0] ./hello.js 66 bytes {0} [built]我们来解释一下什么意思：Asset指这次打包之后的文件名，Size这次打包之后文件的大小，Chunks这次打包的分块。
我们可以来看一看，打包生成的这个hello.bundle.js文件，我们发现看不懂，只看到最后有我们的hello.js的代码了：
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports) {
//这里代码不重要，只是为了演示
function hello(){
alert('hello');
}
hello();
/***/ })
/******/ ]);4、提升
在根目录新建一个word.js，代码如下：
function word(){
return {}; //返回了一个空对象
}现在我们希望在hello.js文件中，去引用这个word.js。
//引用其他文件
require('./word.js')
function hello(){
alert('hello');
}
hello();再次执行webpack打包命令：
webpack hello.js hello.bundle.js没有报错，竟然没有报错。我们竟然可以使用require了，要知道这在原生js里可不行的。
5、webpack如何处理css文件？
新建一个style.css文件，代码如下：
html,body{
margin: 0;
padding: 0;
}下面我们来看如何在js文件中引用css文件：
//引用其他文件
require('./word.js')
require('./style.css'); //匪夷所思，怎么可以在js里引入css
function hello(){
alert('hello');
}
hello();能在js文件里引用css文件，这太领我们匪夷所思了。果然我们再次执行webpack打包命令，发现报错啦：
//......
You may need an appropriate loader to handle this file type.
//........根据提示是说我们需要合适的loader来处理css这个类型的文件。
6、安装需要的loader
npm install css-loader style-loader --save-dev其实除了css-loader，我们还需要style-loader，它们是一起使用的。
OK，我们已经安装了这2个loader，但是还没有完，我们还需要指定这2个loader。
require('style-loader!css-loader!./style.css'); 我们在引入css文件的时候，指定这2个loader。(注意语法)
好了，我们再次执行webpack打包命令，就不会报错了。
我们可以新建一个html模板文件，然后引入我们打包生成的hello.bundle.js，测试一把。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"
<title>webpack-test</title>
</head>
<body>
<script src="hello.bundle.js"></script>
</body>
</html>7、css-loader和style-loader
还记得我们前面是这样引入css文件的吧
require('style-loader!css-loader!./style.css'); 这表示：先用css-loader来处理css文件，然后style-loader接着处理。
style-loader就是把css-loader处理完的内容，新建一个标签(style)，插入到我们的html模板里面。
比如，前面的例子，我们的html模板文件在引入hello.bundle.js之后，我们通过浏览器观察源码，我们会发现在html的head标签内，会多了如下代码：
<style type="text/css">html,body{
margin: 0;
padding: 0;
}</style>8、每修改一下都要重新打包，这样是不是太麻烦了。
我们可以在打包的是，给加一个参数
webpack hello.js hello.bundle.js --watch执行上面命令，我们发现终端进入『等待』状态，以后我们在修改文件，就不必再次打包了。
这就是实现了自动打包，
