程序员技术交流、面试、职场、生活、游戏、相亲，综合讨论QQ群：387017550，群内经常发红包，欢迎加入
核心竞争力：每周一次免费面试，在YY频道直播，可旁听，有往期录音
0、前注
本文内容源于webpack中文文档，以及我自己实践中写的若干DEMO。
每个DEMO以文件夹为单位，从入门到进阶，根据文件夹编号为准，逐步递进。
成文时，webpack版本是【3.8.1】
交流QQ群：387017550
0.1、安装webpack
首先你需要安装Node.js，点击打开Node.js下载页面。安装完Node.js后，会自带npm包管理器。
npm install webpack -g
这个命令将安装最新版本的webpack（全局，学习教程中推荐，避免多次安装。但实践中还是有必要一个项目一个webpack，避免版本冲突带来的bug）
目前版本是3.8.1（2017/11/27）
webpack -v
查看当前webpack版本
执行命令：
以下执行webpack命令时，指在对应文件夹下，通过控制台执行命令。
快速抵达对应目录的控制台（win）：
在对应目录下，按住 shift，然后点击鼠标右键，在弹窗里选择在此处打开命令窗口即可启用
MAC 快速打开某个目录的终端：
参考这个链接
0.2、命令执行
安装（fork项目后，第一次运行每个项目之前，都需要执行一遍）
npm install
执行（不同项目，执行的命令可能不同，参照每个项目的文档，或者 package.json 里的 scripts 里的值）
// 一般使用（没有特殊要求，表示这个只是为了熟悉功能）
npm run test
// 开发环境使用（从 7、HMR 一节开始添加，）
npm run dev
// 生产环境使用（一般用于实战项目，或该项目同时有开发和生产两个版本的webpack配置）
npm run build
0.3、webpack的版本
当我们全局安装webpack之后，package.json 里也会有webpack，这两个webpack的版本，可能是不一样的。
那么当我们打包的时候，如何确认当前使用的是哪一个webpack版本呢？
使用全局的webpack的版本
通过直接执行 webpack 命令，将使用全局的 webpack 版本
webpack
使用当前项目的webpack版本
当我们通过 npm 命令来执行时，将使用当前项目的 webpack 版本。
例如：
npm run build
就将使用 node_modules 里面的 webpack 的版本。
0.4、快捷链接，点击快速抵达对应项目目录
- babel-loader：用于将es6、es7等语法，转换为es5语法；
- css-loader：用于处理css文件（主要是处理图片的url）；
- style-loader：将转换后的css文件以 style 标签形式插入 html 中；
- postcss-loader：一般用于添加兼容性属性前缀；
- less-loader：以 less 语法来写 css ；
- url-loader：用于将图片小于一定大小的文件，转为 base64 字符串；
- file-loader：
url-loader不能转换 base64字符串 的文件，被这个处理（主要用于设置打包后图片路径，以及CDN等）； - html-withimg-loader：用于加载html模板；