webpack简介和安装

Webpack是一个Web前端打包工具，主要应用于前端项目构建。Webpack支持灵活的扩展配置，而且生态非常丰富。很多前端“脚手架”都是基于Webpack和各种插件封装而成的。除此之外，我们自己编写的单页应用，也可以调用Webpack进行打包。本篇笔记以最新的Webpack5为例，简单介绍Webpack工具的使用。

官方文档：https://www.webpackjs.com/

Webpack和Gulp的区别

Webpack和Gulp虽然乍一看都是用来构建项目的，但实质上它们是两种不同的工具，难以进行比较。Gulp是一个基于流程的构建工具，而Webpack是一个打包（bundle）工具。Webpack可以通过插件集成到Gulp中，作为Gulp打包流程中的一个步骤。目前大多数工程都使用Webpack而不使用Gulp的原因是大部分场景Webpack就已经可以实现了，没有什么更复杂的构建流程。

Webpack中的基本概念

入口 Entry：Webpack基于一个依赖图（Dependency Graph）来构建项目，入口指定了依赖图的起点。

输出 Output：输出指定Webpack打包声称的包（Bundle）放在哪，如何命名。

加载器 Loader：默认情况下Webpack只能对JavaScript源码和JSON进行打包，Loader能够让Webpack处理更多资源，比如图片、CSS等。

插件 Plugin：Webpack具有一套PluginAPI用于编写插件，插件能Hook到Webpack打包过程中的，执行一些操作来实现复杂的功能。

在项目中安装Webpack

Webpack本质上是一个命令行工具，它可以全局安装，也可以局部安装。不过在项目中，我们应该使用局部安装，以避免不同项目中Webpack版本冲突带来的问题。

npm install --save-dev webpack-cli webpack

有关Webpack具体如何使用，我们将在后文进行介绍。