webpack 基础入门 - 了解webpack

在学习webpack之前先来了解一下什么是webpack，为什么要使用webpack，和其他的同类型软件有什么区别。

什么是webpack？

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

根据官方的说明，通俗来讲可以分为一下几个方面

1. 针对于 javascript 应用程序的
2. 是一个静态模块打包器
3. 根据模块间的依赖关系，将这些模块打包成一个或者多个文件。

常见的打包工具还有哪些，他们之间的区别是什么？

通过介绍已经知道 webpack 工具的作用，webpack是构建工具中的一种，那么相同类型的还有其他工具吗，答案是肯定有的。那常见的构建工具有哪些，他们之间的区别是什么呢？

1. Grunt。是一个任务执行者，有大量现成的插件封装了常见的任务，也能管理任务之间的依赖关系，自动化地执行依赖的任务，每个任务的具体执行代码和依赖关系写在配置文件里。优点：灵活，它只负责执行我们定义的任务；大量的可复用插件封装好了常见的构建任务。缺点是集成度不高，要写很多配置后才可以用，无法做到开箱即用。
2. Gulp。是一个基于流的自动化构建工具。除了可以管理和执行任务，还支持监听文件、读写文件。优点是好用又不失灵活，既可以单独完成构建，也可以和其他工具搭配使用。其缺点和Grunt类似，集成度不高，要写很多配置后才可以用，无法做到开箱即用。
3. Fis。是来自百度的开源构建工具。相对于Grunt、Gulp这些只提供了基本功能的工具，Fis内置了许多功能，无须做太多配置就能完成大量工作。
4. Webpack。专注于构建模块化项目。专注于处理模块化的项目，能做到开箱即用、一步到位；可通过Plugin扩展，完整好用又不失灵活；使用场景不局限于Web开发；社区庞大活跃，经常引入紧跟时代发展的新特性，能为大多数场景找到已有的开源扩展；良好的开发体验。Webpack的缺点是只能用于采用模块化开发的项目。

为什么要使用 webpack?

前端技术发展之快，各种可以提高开发效率的新思想和框架层出不穷。但是它们都有一个共同点：源代码无法直接运行，必须通过转换后才可以正常运行。同时还有需要如下的处理：代码转换、文件优化、代码分割、模块合并、自动刷新、代码校验、自动发布。构建其实是工程化、自动化思想在前端开发中的体现，将一系列流程用代码去实现，让代码自动化地执行这一系列复杂的流程。构建为前端开发注入了更大的活力，解放了我们的生产力。

因为种种方面的原因，我们借助于构建工具来解决复杂的问题同时提高工作效率。webpack 与其他构建工具我们已经做了对比，如果项目中更加的注重模块化的开发，那么webpack就是不二的选择。

---

webpack 版本

目前 webpack 已经更新到 v4.0 版本，相对于之前的版本也有所调整：

1. 不再支持Node.js 4
2. 支持多种模块类型
3. 用mode属性区分环境
4. 零配置模块打包
5. 更快的构建时间
6. 全新的插件系统
7. 到webpack-cli的改变 该版本的更新做了更多的优化处理，同时也使得入门学习变得简单。

webpack 安装

准备条件：

webpack 是基于 node.js 开发的，所以其运行要保证是最新的 node.js 版本。如果版本过低则可能遇到各种问题。

本地安装

运行webpack 4.0 版本需要同时安装 webpack-cli 。对于多数项目还是建议使用本地安装，一方面是保证每个项目都有独立的webpack 配置方案，方便设置与修改，避免导致多个项目共同使用造成的环境配置冲突的问题。

安装命令如下：

`npm install --save-dev webpack webpack-cli`
复制代码

全局安装

webpack 也提供了全局安装的方式

`npm install --global webpack`
复制代码

概念了解

在开始学习webpack 之前，有几个核心的概念需要掌握。

1. 入口(entry)

   入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

2. 出口[output]

   output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。

3. 依赖[loader]

   loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

4. 插件(plugins)

   loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。

5. 模式(mode)

   通过选择 development 或 production 之中的一个，来设置 mode 参数，你可以启用相应模式下的 webpack 内置的优化