webpack支持的三种模块化方式: AMD,COMMON,ES6
webpack官网很多文档都在
在webpack中，任何资源都视为一个模块
loader的处理方式是从右到左
webpack-2：
https://qiutc.me/post/webpack-2-%E7%9A%84%E6%96%B0%E7%89%B9%E6%80%A7-What-s-new-in-webpack-2.html
一、初始webpack
webpack官网地址：http://webpack.github.io/docs/what-is-webpack.htm
1. 安装全局 => npm install webpack –g；
2. 进入文件根目录,例如test；
3. 初始化npm => npm init (回车创建package.json)；
4. 在文件夹安装webpack => npm install webpack - -save-dev;安装完之后有文件夹node_modules;
5. 在根目录test下新建hello.js,
-- 使用webpack打包文件hello.js; 命令行 => webpack hello.js hello.bundle.js(打包以后文件的名称);
-- 打包完成会给一些信息：哈希；版本；时间；Asset(打包生成的文件)；size(文件大小)；chunks(这次打包的分块)；chunk Names (这次打包的块名称)
-- 打包完以后的文件hello.bundle.js，上面有一大段代码是在打包的过程中，生成的它自己所需要的一些内置函数；比如webpack_require; 在后面能看见我们的代码，以及给这个代码块的编号；
6. 新建一个文件，熟悉下webpack的工作原理；
-- 新建一个world.js，在hello.js文件中 rquire () 引用进来;
-- 再运行一下 webpack hello.js hello.bundle.js
-- 打包完成，会有两个模块(0,1)；再看一下文件名内容，world已经被打包进来，hello.js里面的require() 已经变成了webpack 内置的 webpack_require;这是webpack的一种工作方式；寻找它的依赖然后把它们打包在一起；
7. 试一下打包css文件
-- 新建一个style.css
-- 在hello.js文件中 rquire 进来;
打包；会报错 You may need an appropriate loader to handle this file type.（你需要一个适当的loader来处理这种文件！）
-- 这说明webpack 天生是不支持这种类型.css的，要处理这种类型需要依赖loader;
-- 在项目目录下安装这个css-loader;配合css-loaer 还需要 style-loader;
npm install css-loader style-loader –-save-dev;
再运行一下webpack hello.js hello.bundle.js 还是报错；文件中require()的css并没有指定相应的loder;
-- require(‘css-loader!./style.css‘);这种语法，在引用这个文件之前，必须先经过css-loader的处理;
在运行一下命令;css文件已被打包进来；也多了一些其他的自定义的内置函数；
8. 为了更清晰的展示效果，在建一个html文件；引入打包后的文件；
——在hello中，添加执行函数代码 hello(‘hello world‘);
打包；然后在浏览器打开html文件，hello函数已经执行；
——再修改一下css 比如给body加背景颜色；
打包；刷新页面；并没有效果；因为我们要是css生效，还需要借助一个loader:style-loader; require(‘style-loader!css-loader!./style.css‘);
打包；刷新页面；发现css生效；
F12看下代码，会发现我们写的css，被新建了一个style标签插在了head里面；这是通过style-loader做到的；
style-loader：把css-loader处理完的文件，新建一个style标签放在head里面；
css-loader： 是的webpack可以处理.css文件；
9. 如果不把loader放在require里，可以通过命令行工具；
Webpack hello.js hello.bundle.js –module-bind ‘css=style-loader!css-loader’;
模块绑定,如果是css, 用style-loader,style-loader之前用css-loader处理;
10. –watch监听；文件改变就会打包；
Webpack hello.js hello.bundle.js –module-bind ‘css=style-loader!css-loader’ --watch
11. --progress 可以看到打包过程；有个百分比读条
12. –display-modules 可以看到打包的模块 会把引用的所有的模块会列出来
13. –display-reasons 会有打包模块的原因