Webpack 入门
浏览器端的模块化
如果仅仅是在网页中通过脚本引入一个 JS 文件，而这个文件又依赖 A，A 又依赖 B。此时，你只是希望对一个文件发出请求，然而事实上，浏览器会对所有涉及到的依赖文件都发出请求。
浏览器端的模块化，需要解决以下几种问题：
- 效率问题：精细的模块划分带来了更多的 JS 文件，更多的 JS 文件带来了更多的请求，降低了页面的访问效率。
- 兼容性问题：浏览器目前仅支持 ES6 的模块化标准，而且还存在兼容性问题。
- 工具问题：浏览器不支持 npm 下载的第三方包。
而这些，仅仅只是前端工程化的一个缩影。
当开发一个具有规模的程序，我们将会遇到非常多的业务问题。这些问题包括：执行效率、兼容性、代码的可维护性可扩展性、团队协作、测试等等，我们将这些问题称之为工程问题。工程问题与业务无关，但它深刻影响开发进度。如果没有一个好的工具解决这些问题，将使得开发进度变得极其缓慢，同时也让开发者陷入技术泥潭。
根本原因
思考上面的提到的问题，为什么在 node 端没有那么明显，反而到了浏览器变得如此严重呢？
答案是——在 node 端，运行的 JS 文件在本地，因此可以本地读取文件，它的效率比浏览器远程传输文件高得多。
而 根本原因，在于浏览器端开发时和运行时的侧重点不一样。
- 开发时：
- 模块划分越细越好
- 支持多种模块化标准
- 支持 npm 或其他包管理器下载的模块
- 能够解决其他工程化的问题
- 运行时：
- 文件越少越好
- 文件体积越小越好
- 代码内容越“乱”越好
- 所有浏览器都要兼容
- 能够解决其他运行时的问题，主要是执行效率问题
解决办法
既然开发时态和运行时态面临的局面有巨大的差异，因此，我们需要有一个工具。这个工具能够让开发者专心地在开发时态写代码，然后利用这个工具将开发时态编写的代码转换为运行时态需要的东西。
这样的工具，叫 构建工具。
这样一来，开发者就可以专注于业务开发，而不用担心运行时遇到的问题。而构建工具，则负责将开发时态的代码转换为运行时态的代码。
常见的构建工具
- Grunt
- Gulp
- Grunt
- fis
- browserify
- Rollup
- Parcel
- Webpack
- 其他
Webpack 简介
Webpack 是基于模块化的打包（构建）工具，它把一切视为模块。它通过一个开发时态的入口模块为起点，分析出所有的依赖关系，然后经过一系列的过程（压缩、合并），最终生成运行时态的文件。
Webpack 的特点
- 为前端工程化而生：Webpack 致力于解决前端工程化，特别是浏览器端工程化中遇到的问题，让开发者集中注意力编写业务代码，而把工程化过程中的问题全部交给 Webpack 解决。
- 简单易用：支持零配置，可以不用写任何一行额外的代码就使用 Webpack。
- 强大的生态：Webpack 是非常灵活、可以扩展的，Webpack 本身的功能并不多，但它提供了一些可以扩展其功能的机制，使得一些第三方库可以融入到 Webpack 中。
- 基于 NodeJS：由于 Webpack 在构建的过程中需要读取文件，因此它是运行在 node 环境中的。
- 基于模块化：Webpack 在构建过程中要分析依赖关系，方式是通过模块化导入语句进行分析的。它还支持各种模块化标准，包括但不限于 ES6、CommonJS。
Webpack 的安装
Webpack 通过 npm 安装，它提供了两个包：
- Webpack：Webpack 的核心库，它提供了 Webpack 的基本功能，包含了构建过程中要用到的所有的 API。
- Webpack-cli：Webpack 的命令行工具，它提供了 Webpack 的命令行接口，使得开发者可以通过命令行来使用 Webpack。
安装方式：
- 全局安装：可以全局使用 Webpack 命令，但是无法为不同项目对应不同版本。
- 本地安装：推荐，每个项目都使用自己的版本进行构建。
Webpack 的使用方式
webpack默认情况下，webpack 会以 ./src/index.js 作为入口文件分析依赖关系，打包到 ./dist/main.js。
通过 --mode 参数可以控制 Webpack 打包结果的运行环境。