前端自动化构建工具：Webpack（一）—— 初步认识 Webpack

对于每一个前端开发工程师来说，Webpack 无疑是最难啃的骨头之一。Webpack是前端最主流的自动化构建工具，很多前端框架（Vue、React等）都依赖于 Webpack 进行搭建。然而，相比于熟悉Gulp，熟悉 Webpack 的成本高了很多。因为 Webpack 本身不仅多了很多概念需要去理解，也有许多不得不掌握的优化配置。

在去年10月份，Webpack5 正式发布，它主要是围绕优化进行升级。Webpack5 和 Webpack4 在使用的过程中会有一些小差异，但由于很多团队依旧在使用旧的 Webpack4 版本，为了对新手更友好，接下来的文章，将先基于 Webpack4 ，从零开始进行全面的搭建教学。关于 Webpack5 的新特性，我会在之后的文章进行讲解。

一 Webpack简介

Webpack 是一款基于模块的模块打包器，它将一切文件视为模块（ JS文件、JSON文件、CSS文件、Less文件、图片文件等），然后根据指定的入口文件，对模块的依赖关系进行静态分析，一层层的搜索所有依赖的文件，并将它们打包生成对应的静态资源。

Webpack 有五个核心概念：Entry、Output、Loader、Plugins、Mode（这五个概念现在不太懂没关系，后面会带你慢慢了解）。

• Enrty 为入口， 指示以哪个文件为入口起点进行打包，并分析构建内部模块依赖关系结构。

• Output 为出口， 指示 Webpack 打包猴的资源输出到什么位置，以及如何命名。

• Loader 的作用类似于文件翻译器，由于 Webpack 本身只能理解 JavaScript，用 Loader 可以对将 JavaScript 文件进行转换从而让 Webpack 处理。

• Plugins 即插件，安装各种各样的插件可以极大的丰富 Webpack 的功能，让 Webpack 可以执行范围更广的任务，例如打包优化、压缩代码等等。

• Mode 指示 Webpack 使用相应模式的环境配置，它包含两个选项：开发环境 development 和 生产环境 production。

下面我将先带领零基础的同学先简单了解一下 Webpack 这个工具，暂时不涉及 webpack.config.js 文件的编写。想学习 webpack.config.js 文件编写的同学请前往下一篇文章。

二 初步使用 webpack

2.1 初始化 webpack

使用 Webpack，我们首先需要初始化 package.json 文件（首先请确保你已经安装了 Node.js 的最新长期支持版本，当前最新长期支持版本为14.15.4）。我们在控制面板输入 npm init ，然后一路回车即可（如果在package name 处回车报错，可能是因为你当前的默认文件名不合法，这里主动合法命名再回车就好了，如下使用的 webpack-study）。

完事后你的文件夹会生成一个 package.json 文件，接下来我们所有安装的依赖，都会记录到这个文件里。

初始化完 package.json 后，我们需要安装 webpack，才可以使用 Webpack 的功能。这里看下官方文档，如果是使用 webpack 4+ 版本，我们在安装 webpack 的同时还需要安装 webpack-cli（此工具用于在命令行中运行 webpack）。

我们先尝试安装 webpack4 环境：

安装完成后，我们的 package.json 文件也会记录上对应的版本（如果你使用的是 npm5，你可能还会看到一个package-lock.json 文件，它的作用是用于锁定版本号防止团队开发过程起冲突）：

2.2 使用 webpack

从现在开始，我们便可以尝试使用 webpack 了。webpack 的默认入口文件是 src 目录下的 index.js 文件。我们尝试建立一个 src 目录并创建一个 index.js 文件，然后在控制台运行 webpack 指令，如图：

2.2.1 指定入口文件和出口位置

运行完 webpack 指令后我们可以看到，webpack 自动帮我们生成了一个打包好的 main.js 文件并保存在 dist 目录下。这些都是 webpack 的默认配置，我们也可以在命令行手动改变所读取的入口文件的位置和所输入的出口文件位置。例如在命令行运行 webpack 的时候指定 --entry （入口文件位置） 与 -o（出口文件位置）即可：

webpack --entry ./src/index2.js -o ./dist2/main.js

2.2.2 配置运行环境

webpack 默认指定的 mode 为生产模式 production（会默认帮我们进行代码压缩），打包出来的文件会自动被压缩。项目大的时候，压缩的过程其实是很耗费时间的。你可以在指令后面修改 mode 来主动控制启动开发环境或生产环境。如果你不希望输出的代码被压缩，你可以执行：

webpack --mode=development

这样便将 webpack 的模式设为开发模式了。对应的生产模式，只需要加上 --mode=production 即可。

2.2.3 可识别的资源类型

webpack 本身可以解析 js 文件或 json 文件，但解析不了 css 文件。我们可以测试一下：

创建一个 test.json 文件，并且在入口文件 index.js 中引入，然后执行 webpack：

可以看到，打包出来的文件可以正常获取到 test.json 里的数据。（如果我们手动创建一个 html 文件并引入这份打包好的 js 文件，我们会发现，刚刚我们使用 ES6 的模块化是可以被浏览器识别的，这说明了 webpack 会自动替我们处理好模块化规范的兼容问题。）

那引入 css 文件会如何呢？

很遗憾，webpack 本身无法解析 css 文件，这里引入图片等其它资源也一样，它会提示我们需要安装相应的 loader 去处理这种类型的文件。

2.2.4 结论

经过上述过程，你应该对 Webpack 已经有了个初步的了解。但是上述过程的演示是使用命令行添加参数的模式进行 webpack 的运行（这种叫CLI方式，如 webpack --mode=development），在实际的开发配置过程中，我们不会使用这么麻烦的方式，而是用一个单独的 webpack.config.js 文件将所有配置整合起来，最后再单独运行 webpack 指令就可以了。关于实际开发中的配置方式，我将会在下一篇文章进行讲解。