1-webpack
模块加载器兼打包工具。在webpack中，把各种资源看作一个模块，如js、样式、图片等，都可以作为模块来使用与处理。不同的模块对应不同的加载器，称为loader。
2-webpack优势
可以将任何文件类型模块化，可以通过commonJS的形式开发，支持AMD与CMD，打包、压缩混淆，图片转base64等
3-安装node与npm
安装webpack前，需安装npm，安装npm之前需安装node.js。node.js自带了软件包管理器npm，webpack需node.js v0.6以上支持。
安装node：
法1：下载安装包，https://nodejs.org/en/，Windows上安装需选择全部组件，包括勾选Add to Path。
法2：使用nvm（Node Version Manager）安装nodejs，
4-安装webpack
全局安装：npm install webpack –g
查看webpack版本：webpack –v
推荐将webpack安装到当前的项目依赖中，即可根据本地项目使用对应版本的webpack：
首先，创建一个测试目录：mkdir testapp
然后，通过npm初始化该目录：
npm init
name(testapp) hello
npm初始化时会创建一系列基础信息，包括name、version、description、main、author、licence，只要写上name与author，一路回车即可，完成后这些信息将保存在package.json配置文件中。
上面说到，可以将webpack安装在当前目录下：
npm install webpack –save-dev
可简写为：npm i webpack –D
其中，-save模块名将被添加到dependencies，可简化为参数-S；-save-dev 模块名将被添加到devDependencies，可以简化为参数-D。安装完成后，会出现一个node_modules目录，这里面会存放通过npm安装的模块。
Webpack打包：
先在testapp目录下创建index.html，其中引入的外部js文件不是我们创建的，而是用webpack生成的文件；
创建app.js文件，命名无所谓，下面会通过webpack打包这个js文件
打包：webpack app.js build.js
其中，app.js为我们创建的外部文件，build.js为我们将app.js打包后的js文件。查看当前文件夹，可看到app.js、build.js、index.html、node_module、packpage.json。打开浏览器即可看到index.html呈现的页面。
loader：
webpack本身只能处理JavaScript模块，但通过loader转换功能可以实现对其他类型文件的处理。loader可以理解为模块与资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。那么，则可以通过require来加载任何类型的模块或文件，如vue、sass或图片。
查看文件内容：TYPE C:WINDOWSREDEA.TXT
安装css的loader：
css的转换，需要引入两个loader，css-loader与style-loader
npm install css-loader style-loader –save-dev
新增test.css文件；
在app.js中利用require引入test.css；
打包
加载图片：
首先图片需要url-loader加载器，npm install url-loader –save-dev
修改css
再打包
详细细节可参看：
http://mp.weixin.qq.com/s?__biz=MzI1ODE4NzE1Nw==&mid=2247484497&idx=3&sn=db3c4c05f5b603a56f6c896394d18d6e&chksm=ea0d4eabdd7ac7bd0cd663c544a2872286b1de52ec4a2d506f9966e5656675d68772fa90ea78&mpshare=1&scene=1&srcid=0420sNnJvqqkEwC7cNhA03zV#rd