Webpack是什么？

"A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff. "
这是gayhub上对它的原文介绍，是不是只看懂了javascript、ES6、CSS、JSON？(开个玩笑:))
其实看下面这张图就比较清晰了：

(图片来源官网 链接描述)
总结以上，我个人的理解是：一切皆模块。Webpack通过各种loader和plugin的相关配置，将复杂的文件和依赖包细化、打包，使得无论是开发还是上线发布都大大节省了效率。

为什么选择Webpack？

与Rollup对比

在开发大型项目、应用时一般使用 Webpack，开发框架库时一般使用 Rollup。

例如React、Vue都是使用Rollup作为构建工具，它的特点就是相比其他JavaScript打包工具，Rollup总能打出更小更快的包；
而Webpack则以功能全面取胜（例如：对代码分割和静态资源导入显著优势，热更新HMR等等），并且在Version 2中加入了Tree Shaking功能(即删除无用代码)

与Parcel对比

使用过Webpack的猿(媛)们应该都了解过其比较繁琐的配置文件，而Parcel则几乎是零配置，只有少量的配置项通过命令行即给处理了，这对于追求简易开发流程的工程师来说是很友好了。

例外Grunt和Gulp本人没有了解过，大家感兴趣的话可以自行查找一下相关资料文档。
总之，抛开一切环境谈工具都是耍流氓，技术并无好坏，只有适不适合。大家应该先明白自己需要实现的功能是什么，才能选择好应该使用什么技术，切不可盲目跟风。

如何使用Webpack？

写在前面：此次Webpack版本4.29.5，Webpack-cli版本3.2.3
①首先选择新建项目的文件夹，打开命令行工具输入'mkdir webpack-demo',然后'cd webpack-demo'
②'npm init -y'
③'npm install webpack webpack-cli --save-dev'
这是初始化Webpack的第一步，此时的目录结构应该是这样的:

接着在根目录下新建webpack.config.js和dist文件夹，将index.html移入dist文件夹内
webpack.config.js是为了迎合项目的复杂配置需求，后面会介绍它的具体内容，总之是Webpack中非常重要的部分；
dist中的文件是作为'分发'文件，其中代码就是我们最小化和优化后的代码，在打包后会出现在浏览器中；而src中的文件是作为'源'文件，也就是我们开发编辑的代码。所以我们将index.html移入dist内。

我们在webpack.config.js中写入以下内容：

工程的自定义配置写好了，下面来写需要打包的文件./dist/index.html和./src/index.js

写好之后还需要在终端中安装一下lodash(这个工具库真的挺好用的，感兴趣的朋友可以了解一下)：npm install --save lodash
OK,万事具备，只欠'npx webpack',我们在命令行中输入一下，几秒中之后它会输出下面这些，表示打包成功了：

然后我们打开index.html会发现页面上出现了'Hello webpack',而dist文件夹中也新增了main.js文件。恭喜你，一个极简单的打包工程就算完成了！

可是这点知识是远远满足不了我们日常工作的，下面介绍下个人认为使用Webpack必备姿势。

①入口文件如果是一个即可以是上面的写法，如果是多个则可以是下面这种：

比较推荐第二种key-value的形式，原因就是方便找到；

②出口文件中'[name]'既是entry的js名称：

③Loader的介绍以处理css文件为例：
早期传统引用css文件的方式一般都是利用link标签，而随着工程中页面的模块化、Sass和Less等预处理器语言的出现以及性能优化要求的提高，对css文件的加载方式也发生了变化，这就是利用Webpack的好处之一。

解释下上面的截图，'test'属性利用正则表示式匹配文件后缀名；'use'里则是各loader，实际的加载顺序和这里写的顺序是相反的，也就是从下往上执行。
接着我们新建css文件：

然后在index.js里import一下： import './css/base.css'，
打开index.html就可以看到样式的改变了。
如果你是less/sass文件，则需要修改下配置：

将'test'里的css换成less，然后重新命名下css文件，利用相关的语法：

index.js里的import也是需要修改的。最后你会发现页面样式跟着改变了。
这里需要补充的一点是，如果你的工程中同时存在css文件和less/sass文件，在配置loader时，就应该重新定义个对象，而不是紧跟css-loader来写其相关配置项！
④Plugin的介绍：
Webpack中有两种插件，一种是Webpack自带的，一种是要通过npm包require的：

如图，引入依赖后在plugin数组中配置相关内容（例子中UglifyJsPlugin则是Webpack自带的)。

这篇文章比较详细介绍了主要的几种插件及其配置信息，大家感兴趣的话可以看看链接描述
刚开始学习Webpack时，我对Plugin和Loader的概念有些混淆，其实简单来说，Loader可以理解成文件的转换器，而Plugin的是一种出现于整个打包生命周期的运行机制，是一种扩展功能。

前几天看到一道面试题是问插件的实现原理是什么？自己也去查找了相关资料，个人理解如下：Webpack是一系列复杂工序，其中一个名为compiler的对象会作为参数调用插件实例的apply方法，
插件实例在获取到compiler对象后，就可以通过compiler.plugin(事件名称, 回调函数) 监听到Webpack广播出来的事件，进而改变相应的结果，实现其功能。

写在最后：
这是自己第一次写学习笔记，自知内容比较基础还需要深入研究，算是自己对相关知识的梳理吧。有不对之处还望各位大佬不吝赐教！