在日常开发过程中，相信大家都会使用到脚手架，比如 vue-cli 等等。诚然，脚手架可以让我们的日常开发更加便利，但是久而久之，逐渐依赖脚手架进行开发的我们，可能会对一些工具的使用逐渐生疏，比如 webpack 。
尤其在公司的技术栈日趋稳定之后，我们手动配置 webpack 的机会就越来越少，我就是如此...Orz。所以借此机会，我决定再重头学习一遍这个熟悉而又有点陌生的工具，并将笔记做一个梳理，希望对同样有此感触，或者想学习 webpack 的小伙伴们有所帮助~
此处主子镇楼~
本章节及后面的章节使用的webpack及webpack-cli的版本如下：
"webpack": "4.41.6"
"webpack-cli": "3.3.11"
在开始学习webpack之前，我们先来了解一下与之相关的一些基础知识。
构建工具的概念
通俗点来说，构建工具就是包含一系列小工具的大工具。
我们来举个🌰：比如我们需要将less、sass等css预处理器写的代码编译成正常的css代码，则需要相应的编译工具；而需要将ES6+的代码转换为兼容性更高的ES5的代码，也需要相应的编译工具。而将诸如此类的小工具包含起来的大工具，就叫 构建工具 (比如我们接下来要学习的 webpack 就是构建工具)。在构建工具中,我们可以处理所有的这些操作。
静态模块打包器的概念
这个概念里主要分为两个小的概念，即 静态模块 与 打包。
我们来看下如下代码：
// main.js
import $ from 'Jquery'
import './less/common.less'
我们在入口文件中引入了两个模块，webpack在打包的时候，会先生成对应的依赖关系，即在 main.js 中引入了 Jquery 以及common.less 两个模块：
其中 main.js , Jquery , common.less 称为 （静态）模块，也叫做 chunk ，含义就是代码块; 之后webpack会对chunk代码块进行处理，将less以及ES6语法做转换，转换成浏览器可识别的内容，这个过程叫做打包。打包完成后，输出的文件称之为 bundle。
Webpack的五个核心概念
- entry：指示webpack从哪个入口开始打包，分析并构建内部依赖图。
- output：指示webpack打包之后的bundle文件生成到哪里去。
- loader：webpack只能处理js内容，loader的作用就是将非js的内容（比如css/image）转换成webpack可以识别的内容。
- plugins：相较于loader只能用作代码翻译，plugins可以做更多复杂强大的事情。
- mode：主要分为development以及production模式。相较于生产模式，开发模式的配置会比较简单，具体的区别可以参照下表：
| 环境 | 描述 | 特点 |
| ------ | ------ | ------ |
| development | 会将process.env.NODE_ENV的值设为development。
启用NamedChunksPlugin和NamedModulesPlugin。 | 能本地调试 |
| production | 会将process.env.NODE_ENV的值设为production。
启用FlagDependencyUsagePlugin,FlagIncludedChunksPlugin,ModuleConcatenationPlugin,NoEmitOnErrorsPlugin,OccurrenceOrderPlugin,SideEffectsFlagPlugin和UglifyJsPlugin。 | 能优化生产环境的代码 |