Webpack 入门:Webpack 是一个前端资源加载/打包工具
安装 Webpack:在安装 Webpack 前，你本地环境需要支持 node.js。
npm 安装速度慢,，本教程使用了淘宝的镜像及其命令 cnpm
1、安装cpnm：npm install -g cnpm
2、使用 cnpm 安装 webpack：cnpm install webpack -g
webpack使用
webpack runoob1.js -o bundle.js（新版本需要加上-o）
命令会编译 runoob1.js 文件并生成bundle.js 文件
LOADER：Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。
使用以下命令来安装 css-loader 和 style-loader(全局安装需要参数 -g)。
cnpm install css-loader style-loader
require CSS 文件的时候都要写 loader 后缀 !style-loader!css-loader!，当然我们可以根据模块类型（扩展名）来自动绑定需要的 loader。
配置文件：将一些编译选项放在配置文件中，以便于统一管理：
报错：配置文件的版本和我们当前安装的webpack的版本不匹配。
解决方案
插件：插件在 webpack 的配置信息 plugins 选项中指定，用于完成一些 loader 不能完成的工。
开发环境
当项目逐渐变大，webpack 的编译时间会变长，可以通过参数让编译的输出内容带有进度和颜色。
- webpack --progress --colors
如果不想每次修改模块后都重新编译，那么可以启动监听模式。开启监听模式后，没有变化的模块会在编译后缓存到内存中，而不会每次都被重新编译，所以监听模式的整体速度是很快的。
- webpack --progress --colors --watch
可以使用 webpack-dev-server 开发服务，这样我们就能通过 localhost:8080 启动一个 express 静态资源 web 服务器，并且会以监听模式自动运行 webpack，在浏览器打开 http://localhost:8080/ 或 http://localhost:8080/webpack-dev-server/ 可以浏览项目中的页面和编译后的资源输出，并且通过一个 socket.io 服务实时监听它们的变化并自动刷新页面。
安装
- cnpm install webpack-dev-server -g
运行
- webpack-dev-server --progress --colors