在上一篇文章中，我们主要了解了前端开发的演变历史以及 webpack 的由来。在这一章，我们一起来了解下前端开发模式的演变以及 webpack 究竟是什么。
开发模式的演变
我们要实现的页面效果如下：
在 id="root" 的 div 里面添加三块内容
- 第一阶段：面向过程编程
index.html 内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="root"></div>
<script src="./index.js"></script>
</body>
</html>
index.js 内容如下：
var dom = document.getElementById('root');
var header = document.createElement('div');
header.innerText = 'hello header';
dom.append(header);
var sidebar = document.createElement('div');
sidebar.innerText = 'hello sidebar';
dom.append(sidebar);
var content = document.createElement('div');
content.innerText = 'hello content';
dom.append(content);
缺点：
- 可维护性差。当项目越来越大的时候，js 逻辑代码越来越多的时候。我们会发现，我们写的代码越来越长，可维护性变得很差。
- 第二阶段：面向对象编程
我们将不同的内容区域看成不同的类，新建三个文件 header.js，sidebar.js，content.js 。内容如下：
function Header() {
var header = document.createElement('div');
header.innerText = 'hello header';
dom.append(header);
}
// sidebar，content 内容同上
index.js 内容如下：
var dom = document.getElementById('root');
new Header();
new Sidebar();
new Content();
html 内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="root"></div>
<script src="./header.js"></script>
<script src="./sidebar.js"></script>
<script src="./content.js"></script>
<script src="./index.js"></script>
</body>
</html>
项目目录如下：
优点：
- 解决了面相过程的问题。代码拆分成多个 js 文件，各个 js 文件实现对应的功能。
缺点：
- 页面的加载速度会变慢。我们的 index.html 页面里面多嵌入了三个 script 脚本文件，所以就需要额外的三次 http 请求，那么页面的加载速度自然会变慢。
- 在 index.js 里面我们看到 new 了三个对象，但我们并不知道这三个类（Header，Sidebar，Content）是从哪里来的。只能从 index.html 里面的 script 引用来发现。
- 脚本的引用顺序必须正确。如下引用顺序变成了下面这样：
<script src="./header.js"></script>
<script src="./sidebar.js"></script>
<script src="./index.js"></script>
<script src="./content.js"></script>
重新加载页面就会报下面这样的错误：
因为我们在 index.js 里面实例化 Content 的时候，没有找到对应的类。
- 第三阶段：模块化编程
如果我们的 js 文件可以像模块一样引用那就可以解决上述的一些问题。所以后来就出现了各种各样的模块库以及官方在 ES6 中支持的 module（通过 import 和 export 导入导出模块）。
index.html 文件内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="./index.js"></script>
</body>
</html>
index.js 文件内容如下：
import Header from './header.js';
import Sidebar from './sidebar.js';
import Content from './content.js';
new Header();
new Sidebar();
new Content();
header.js 内容如下：
export default function Header() {
var dom = document.getElementById('root');
var header = document.createElement('div');
header.innerText = 'hello header';
dom.append(header);
}
// sidebar.js，content.js 同上
使用模块化编程后，我们解决了上面所说的一些问题：
- 可维护性好。我们将不同的功能拆分实现在不同的文件中，业务功能变得清晰。
- 依赖更加清晰。通过 import 和 export 的方式，我们可以清楚的得知某个模块的由来。
- 加载速度变快（script 脚本引入变少）以及不用考虑 script 的引用顺序。
其实从这个过程中可以看出，功能实现都是一样的，对于机器来说。之所以不断的演进主要还是为了程序员开发更加高效和方便。
webpack 究竟是什么
好了，看完了开发模式的演变，下面我们来看看 webpack吧。
webpack 是一个模块打包功能，默认支持 js 模块的打包，所以下面我们就用这个功能来将我们上面的例子使用 webpack 来实现下。
在开始下面的内容之前，首先确保我们安装了 node 和 npm。（安装 node 的时候会默认安装 npm）。
使用 node -v 和 npm -v 可以看到对应的版本以及确认是否安装。
如果已经安装的话，那么执行下面命令：
cd project // project 为项目的目录
npm init -y // 初始化当前目录为一个 npm 项目。 -y 表示使用默认配置，命令执行完毕后，文件夹下会多出一个 package.json 文件。
npm install webpack webpack-cli --save-dev // --save-dev 和 -D 等效
npx webpack index.js // 执行完命令后，会在项目下发现生成了一个 dist 目录以及 main.js 文件
修改 index.html 内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="root"></div>
<script src="./dist/main.js"></script>
</body>
</html>
刷新网页，我们看到效果依然是 ok 的。不过这次我们引用的是 webpack 帮我们打包生成的文件。
总结：
webpack 是一个模块打包工具，默认支持打包 js 模块。如果想支持其他模块（css，jpg，typescript等）的打包，就需要添加对应的 loader。
