webpack4 一锅端（一）：概念了解

一、写文初衷

webpack 是目前最热门、最好用、社区最活跃的前端打包工具之一。but，虽然官方文档有中英双语版，然而可阅读性真的是不敢恭维，该讲清楚的概念没有讲清楚，一些常用的功能也没有详细说明，都是一笔带过，让人看后有种雾里看花、似懂非懂的感觉。针对这种情况，棍子哥呕心沥血，结合自己查的资料和亲身使用心得，讲讲如何使用 webpack。

webpack 的内容实在太多，本系列文章只会涵盖其中不到 20% 的内容，但却能解决不止 80% 的需求（这很符合二八定律哈哈哈~~）

二、webpack 和 gulp 的区别

webpack 和 gulp 都是前端工程化用到的工具，但二者之间的出发点不一样。

webpack 着眼于项目，善于从一个指定的入口递归的加载和处理文件，最后生成一份归档包。

gulp 着眼于任务，不关心项目的整体情况，如果要使用 gulp 完成 webpack 做的事情，那就需要手动写代码拼凑一个一个零散而繁琐的任务。在有 webpack 的情况下，gulp 一般适合于做一件单纯的事情，比如开发小程序的时候，希望以 less 写 wxss，那可以启一个 gulp 监听文件改动任务，实时把 .less 文件编译成同名的 .wxss 文件。

三、概念了解

entry（入口）

入口文件，表示 webpack 从该文件开始递归加载文件。

output（输出）

输出，表示 webpack 从 entry 递归加载文件并生成归档包文件后，归档包文件应该输入到哪个目录。

loader（加载器）

loader 就是加载文件的处理器，也就是当 JS 文件里使用了 import xxx from 'file' 或者 require('file') 时应该怎么处理。webpack 默认只能处理 JS 文件，也就是说当 file 是一个 JS 文件时不需要我们指定任务 loader，但是当 file 是一个 .scss 的 sass 文件时，默认情况下 webpack 把其当做 JS 文件来处理就会报错，因为 SCSS 文件内容不是合法的 JavaScript，这个时候我们就需要为 .scss 指定特定的 loader，以便 JS 文件能够 import 或者 require 某 .scss 文件。loader 做的事情就是把 .scss 解析为一个 JavaScript 对象，以便 JS 能够读取它并把它生成为一条 style 标签插入到 HTML 里。

plugin（插件）

plugin 用来做 loader 做不了的事情，loader 着眼于文件的引入，plugin 以一个更高的视角处理全局的事务。举几个例子来了解一下 plugin 和 loader 的不同以及 plugin 的作用：

1. loader 完成文件的归档打包工作生成 bundle.js 后，可以通过 plugin 把 bundle.js 引入到 HTML 里。
2. loader 完成文件的归档打包工作生成 bundle.js 后，可以通过 plugin 来压缩 bundle.js。
3. loader 完成文件的归档打包工作生成 bundle.js 后，可以通过 plugin 把 bundle.js 里引入的所有 CSS 提取出来，单独生成一个 style.css 文件，并引入到 HTML 里。

最后用一张图说明 webpack 的执行流程以及 loader 和 plugin 的用途：

webpack 执行流程图

本系列文章目录

webpack4 一锅端（二）：常用配置、loader 配置、plugin 配置

未完待续...