前言
用了 Webpack 4.5 有一段时间了，但是对其貌似缺乏一个具体的了解，最近研究了一下官方文档，参阅了一些博客，写下了一篇文章，希望能给看到同学一些小小的帮助。
第一章 概念
1.1 什么是 Webpack? 为什么要使用 Webpack？
相信很多初学者都会有这个疑问，看了官方的概念也不是很清楚，其实笔者感觉 Webpack 其实没有多么复杂的概念，其主要作用就是打包文件，为什么要打包文件呢？因为打包之后的文件体积会变小，加载起来更快，而且条理更清楚。
上面其实很粗浅的解释，上升来看，Webpack 把一切当成模块，同时具有模块打包的能力。将 css 代码全部加载到<style>中也的确是出于减少 http 请求，当然这是可以配置的，你也可以使用插件把 css 单独打包出来，因为在性能优化方面并不是绝对的，不能说文件越少越好，也不能说文件越小越好，找到一个中立的，最适合当前项目的点就好。
还有就是 Webpack 因为其丰富的扩展性，致使其在开发过程中会基于开发者更多的方便。首当其冲的就是热加载，这个真心在很大程度上方便了开发者的开发。还有一些其他的一些插件，用起来也是美滋滋。
其实跟 Webpack 有类似功能的模块化工具还有跟多，比防说gulp等，但是相比这些，Webpack 有着拆分模块、加载时间少、整合第三方库等优点，所以笔者在这里推荐使用 Webpack。
1.2 Webpack 特点
1.2.1 代码拆分
这是个老生常谈的东西了，Webpack 将异步依赖作为分割点，形成新的块，之后在优化依赖树之后，每一个异步的块都会被打包，条理清晰。
1.2.2 Loader
这个相信用过 Webpack 的人都会知道，但是在这里还是要普及一下。
在 Webpack 里其实只能识别 js，但是实际项目中不可能只用到 js，css、sass 和 less 等经常会用到，这个时候就需要 Loader 来解析这些文件，转化成 js，如此 Webpack 就可以识别了，美滋滋。
1.2.3 插件系统
其实也就是 Plugin 的部分，丰富的插件提供了许多十分方便的功能，在很大程度上丰富了 Webpack 的功能。
1.2.4 运行速度快
官方说 Webpack 使用异步 I/O和多级缓存提高运行效率，大大加快了其打包的速度，简直不敢相信。
1.3 小结
综上所述，Webpack 的主要作用就是一个模块打包器，但是有比市面上别的模块打包器强很多的优点，基本上就是这样的一个意思。
还有一点不得不说的说，Webpack 的团队更新频率非常的高，就拿 Webpack4 来说，从 alpha 第一版出来之后，在六个月的时间里更新的 30 次左右。相比其他的开源类库感觉快了很多。当然了，跟最开始的版本更新是没法比的，它从 0.1.0 到 1.0.0-bata1 耗时大约两年的时间，更新版本 200 个左右，简直令人发指，而且有的版本仅仅 bata 版就有 30 个。
第二章 开始
基础概念也就是上面所说到了，笔者只是尽量以最简单的想法去理解 Webpack。下面就开始基础的项目构建，也就是从 0 开始构建一个 Webpack 服务。
2.1 项目的新建
首先，电脑上需要 NPM，国内的话 CNPM 速度会更快些。Windows 系统下可以安装 Gitbash，或者使用自带的 PowerShell，这两者都是可以的。
然后全局安装 Webpack。
npm i webpack -g
接下来新建文件夹，并且初始化 NPM。
mkdir demo && cd demo && npm init
此时在 demo 文件夹内已经有了 package.json 文件，这是 NPM 初始化之后的文件，具体可以访问官方文档。
在这个时候，很多博客都会教你怎么样使用 Webpack 去打包一个或者多个文件，但是那样感觉没有任何意义，实际工作很难想象会有人这样使用 Webpack。所以，接下来我们就直接使用 Webpack 构建一个服务，启动整个项目。
对了，这个文件夹里面需要放什么东西后面会讲到，现在先空着。
2.2 webpack.config.js 的内容
下面会将一些 Webpack 的 API，这是重点呦。
2.2.1 基础的构建
先安装 Webpack 的依赖（-D 的意思就是 --save-dev）：
npm i webpack webpack-cli -D
在项目的跟目录下新建一个 webpack.config.js 文件，然后在里面写上：
const webpack = require('webpack');
const path = require('path');
const config = {
}
module.exports = config;
基本上就完成了，这么写是有原因的，在下面的章节会讲到。
鼓掌
回复
