基本概念
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
webpack的打包原理
1、识别入口文件
2、通过逐层识别模块依赖(Commonjs、amd或者es6的import，webpack都会对其进行分析，来获取代码的依赖)
3、webpack做的就是分析代码，转换代码，编译代码，输出代码
4、最终形成打包后的代码
loader
loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。 loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。
注意：
1、在 webpack 配置中定义 loader 时，要定义在 module.rules 中，而不是 rules
2、处理一个文件可以使用多个loader，loader的执行顺序和配置中的顺序是相反的，即最后一个loader最先执行，第一个loader最后执行
webpack常用的loader
样式：style-loader(将创建一个style标签将css文件嵌入到html中)、css-loader(处理其中的@import和url())、less-loader、sass-loader(转化sass为css文件)等
文件：raw-loader(将文件已字符串的形式返回)、file-loader(可以复制和放置资源位置，并可以指定文件名模板，用hash命名更好利用缓存。) 、url-loader(将小于配置limit大小的文件转换成内敛Data Url的方式，减少请求)等
编译：babel-loader、coffee-loader 、ts-loader等
校验测试：mocha-loader、jshint-loader 、eslint-loader等
plugins(插件)
插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。
webpack常用的plugin
UglifyJsPlugin:压缩和混淆代码
CommonsChunkPlugin:提高打包效率，将第三方库和业务代码分开打包
ProvidePlugin：自动加载模块，代替require和import
html-webpack-plugin:可以根据模板自动生成html代码，并自动引用css和js文件
extract-text-webpack-plugin:将js文件中引用的样式单独抽离成css文件
HotModuleReplacementPlugin:热更新
loader和plugin的区别
对于loader，它是一个转换器，将A文件进行编译形成B文件，这里操作的是文件，比如将A.scss转换为A.css，单纯的文件转换过程。
plugin是一个扩展器，它丰富了webpack本身，针对是loader结束后，webpack打包的整个过程，它并不直接操作文件，而是基于事件机制工作，会监听webpack打包过程中的某些节点，执行广泛的任务。
从运行时机的角度区分:
1 . loader运行在打包文件之前（loader为在模块加载时的预处理文件）
2. plugins在整个编译周期都起作用。
vue-cli3与webpack的关系
vue-cli3将webpack的基础配置全部内嵌了，但是预留了一个vue.config.js的js文件(与package.json同级)供我们对webpack进行自定义配置。
参考文章
webpack 中文文档
webpack之loader和plugin简介
前端面试题：wepack中loader和plugin的区别
浅入浅出webpack
