专栏首页coding for love2-1 webpack究竟是什么

2-1 webpack究竟是什么

简介

这章主要是为了引出webpack。

1. 普通的网页写法

首先,来看一下,不考虑使用任何工具,如何来写一个网页:

<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>original-pop</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 = 'header';
// 这里,原视屏使用append,看append,appendChild和innerHtml,innerText的区别和性能
dom.appendChild(header);

var sidebar = document.createElement('div');
sidebar.innerText = 'sidebar';
dom.appendChild(sidebar);

var content = document.createElement('div');
content.innerText = 'content';
dom.appendChild(content);

可以看到,最简单的方法,就是将html,js,css放到不同的文件,然后通过src或者href引入。这里我们先不关注css,主要来看js。

这里的js我们采用pop的写法。如果内容越来越多,内容越来越多,难以管理与维护。我们先采用oop的写法来修改上述文件。

2. 使用oop改造

使用oop改造的代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>original-oop</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>
// index.js
var dom = document.getElementById('root');

new Header();
new Sidebar();
new Content();
// header.js
function Header() {
    var header = document.createElement('div');
    header.innerText = 'header';
    dom.appendChild(header);
}
// sidebar.js
function Sidebar() {
    var sidebar = document.createElement('div');
    sidebar.innerText = 'sidebar';
    dom.appendChild(sidebar);
}
// content.js
function Content() {
    var content = document.createElement('div');
    content.innerText = 'content';
    dom.appendChild(content);
}

可以看到,面向对象的写法使各部分代码职责更清晰,维护更方便。但也带来了一些新的问题:

  1. 拆成多个文件导致需要加载的资源更多
  2. 从代码中看不出文件的依赖关系
  3. 不能保证加载顺序,会产生依赖错误

前面两点大家好理解,对于第三点呢,我们可以看一下例子。这里,调整html中对js的引用顺序,将index.js的引入放在最上面,如下:

    <script src="./index.js"></script>
    <script src="./header.js"></script>
    <script src="./sidebar.js"></script>
    <script src="./content.js"></script>

打开网页会发现报如下错误:

依赖出错.png

那么如何解决这三个问题呢?

3. 使用打包工具webpack

我们先来分析一下这三个问题,文件太大了,我们想拆成多个文件,这是出于编写者的需要,明确各个文件之间的依赖关系也是出于编写者的需要,而保证加载顺序是运行时需要。如果仍然使用一个文件,上述问题都不会有,但是编写和维护困难。 那么,换个思路,编写时拆成多个文件,明确指定依赖关系。然后利用工具将所有文件合并到一起,不就解决了所有问题吗?webpack就是这样的一个打包工具。 我们先用esmodule,改造一下上面的js代码,让他符合我们的意图:

// index.js
import Header from './header';
import Sidebar from './sidebar';
import Content from './content';

new Header();
new Sidebar();
new Content();
// header.js
export default function Header() {
    var dom = document.getElementById('root');
    var header = document.createElement('div');
    header.innerText = 'header';
    dom.appendChild(header);
}
// sidebar.js
export default function Sidebar() {
    var dom = document.getElementById('root');
    var sidebar = document.createElement('div');
    sidebar.innerText = 'sidebar';
    dom.appendChild(sidebar);
}
// content.js
export default function Content() {
    var dom = document.getElementById('root');
    var content = document.createElement('div');
    content.innerText = 'content';
    dom.appendChild(content);
}

我们的意图很明确了,指定了各个模块的依赖关系,但是直接运行是不行的,浏览器并不识别esmodule语法。我们需要借助webpack来实现。在当前代码根目录下,进行如下下操作:

1. npm init 或者 npm init -y
2. npm install webpack webpack-cli -D(或者-save-dev),webpack4推荐局部安装,原因见
// https://segmentfault.com/q/1010000013395159/a-1020000014395848
// 这里如果报错:npm ERR! Unexpected end of JSON input while parsing near '...":"3.4.1","devDepende'。可以尝试用cnpm来安装。
3. npx webpack index.js

我们发现在根目录下生成了一个文件夹dist,下面有一个main.js文件,这就是webpack根据模块间的依赖关系打包生成的新文件。我们引入这个文件。

<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>esmodule-oop</title>
</head>
<body>
    <div id="root"></div>
    <script src="./dist/main.js"></script>
</body>
</html>

okay,访问网页,成功。

4. 总结

webpack是一个打包工具。通过webpack,使用esmodule,解决oop的三个问题

  1. 拆成多个文件导致加载资源更多 -> 只用引入一个文件
  2. 从代码中看不出文件的依赖关系 -> 在引入文件中指定依赖关系
  3. 不能保证加载顺序,会产生依赖错误 -> 已制定依赖关系,严格按照依赖关系执行

引申

  1. append,appendChild和innerHtml,innerText的区别和性能
  2. pop和oop的区别

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 3-6 Entry 与 Output的基础配置

    entry与output,顾名思义,就是打包的入口与输出,其实之前我们已经接触了这两个参数,下面详细介绍一下这两个参数的配置。

    love丁酥酥
  • JS原生引用类型解析7-Promise类型

    ES6引入了一个全新的对象Promise,用于表示一个异步操作的最终状态(完成或失败),以及其返回的值。Promise最直接的好处就是链式调用,另外在错误捕获上...

    love丁酥酥
  • 3-9-10 Hot Module Replacement 热模块更新

    模块热替换(HMR - Hot Module Replacement)功能会在应用程序运行过程中替换、添加或删除模块,而无需重新加载整个页面。

    love丁酥酥
  • 手机号验证及归属地

    <?php  // 手机号验证  function checkMobileValidity($mobilephone){  $exp = "/^13[0-9]{...

    joshua317
  • 机器学习降维之奇异值分解(SVD)

    我们首先回顾下特征值和特征向量的定义,如下所示。其中A是一个n×n的矩阵,x是一个n维向量,则我们说λ是矩阵A的一个特征值,x是矩阵A的特征值λ所对应的特征向量...

    小一
  • Hinton AAAI2020 演讲:这次终于把胶囊网络做对了

    AI 科技评论按:2020 年 2 月 9 日,AAAI 2020 的主会议厅讲台上迎来了三位重量级嘉宾,这三位也是我们熟悉、拥戴的深度学习时代的开拓者:Geo...

    AI科技评论
  • “中国合伙人”生存最真实法则:创业七年后为何你会选择离开?

    T客汇官网:tikehui.com 撰文 | 杨丽 ? “创业七年,合伙人被逼走”事件如同一块飞过湖面的乱石,瞬间在互联网圈砸开了花。 近日,一篇名为《就算老公...

    人称T客
  • sqlalchemy和flask-sqlalchemy几种分页操作

    sqlalchemy中使用query查询,而flask-sqlalchemy中使用basequery查询,他们是子类与父类的关系 假设 page_index=1...

    用户1558882
  • sqlalchemy和flask-sqlalchemy的几种分页方法

    sqlalchemy中使用query查询,而flask-sqlalchemy中使用basequery查询,他们是子类与父类的关系 假设 page_index=1...

    用户1214487
  • JQuery常用方法总结

    1.json的创建方式 <script> $(function () { //第一种 var my = new Peop...

    用户1055830

扫码关注云+社区

领取腾讯云代金券