第一章 webpack简介

带着问题：

什么是webpack（what is webpack）
为什么使用webpack（why webpack）
安装、使用webpack（how to use webpack）

自己的思考：

安装webpack对于前端人来说不是什么困难的事情，所以重点我们放在 what why how 上

what

翻译翻译webpack => web + pack => web（web模块） + pack（打包）= web模块打包工具

注意 ⚠️

书中说的是 JavaScript模块打包工具，其最核心的功能是解决模块之间的依赖；而官网展示的是bundle everything的能力，包括scripts, styles, assets, images等。

why

初入前端的人会觉得，在.html文件中写一些style, script，一个页面就写好了。为什么要去折腾出一个模块打包工具， why bother？简单的web应用固然可以这么做，但是当项目的规模变大之后，开发效率，维护效率会降低。

示例

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./b.js"></script>
  <script src="./a.js"></script>
</head>
<body>
</body>
</html>

b.js

var b = function() {
  console.log('print b')
}

a.js

b()

a依赖b，输出

如果改变index.html中a.js，b.js的顺序，输出

产生问题

处理依赖关系，a.js b.js只能人工保证顺序
a.js b.js不同人维护时，变量声明可能会有重复，全局环境变量污染

什么是模块

比如：项目中引入的npm包，或者自己写的工具util.js

历史背景：1.设计之初就没有模块的概念，只是作为脚本运行在浏览器端。2.在越来越复杂的场景下，每个模块写成一个<script>标签，导致引入的 <script> 标签越多，并且模块的相互依赖关系不明确，只能靠人工注释和引入的先后顺序来保证。3.首屏加载速度慢，因为会加载大量 <script> 标签。

产生：es6才正式定义了js模块标准（此前依次出现AMD, CommonJs, CMD）

什么是模块打包工具（module bundler）

作用：解决模块之间依赖顺序问题，将依赖打包成文件

为什么选择webpack

支持多模块标准
支持多种资源的处理
代码切割（code splitting）
社区、生态基础好

how

入门步骤

官网 getting started
使用 webpack-dev-server

(未完待续,详见下一节) 1.1 入门使用 && 1.2 打包代码分析

《Webpack实战 入门、进阶与调优（第2版）》- 第一章 webpack简介