[webpack 学习系列] 2. webpack 究竟是什么

2019-11-03 本文已影响0人小黄人get徐先生

在上一篇文章中，我们主要了解了前端开发的演变历史以及 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。

参考：
webpack 入门
 Module 的加载与实现
 webpack module文档

[webpack 学习系列] 2. webpack 究竟是什么

开发模式的演变

webpack 究竟是什么

猜你喜欢

热点阅读