webpack 简介以及为什么要用webpack

news2024/10/6 5:55:50

webpack 是什么

webpack 是一个用于现代JavaScript 应用程序的静态模块打包工具。
看来像是1个js的打包工具， 但是实际上并没有这么简单









传统html + js 写法1

对于前端新手， 或者被逼写前端的后端开发， 他们写的代码很可能是这样的
html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Original</title>
</head>
<body>
    <div id="app1"></div>
    
    <script src="./js/app1/app1.js"></script>
</html>

js:

const app = document.getElementById("app1");

const header = document.createElement("div");
header.innerHTML = "It's a header";
app.appendChild(header);

const body = document.createElement("div");
body.innerHTML = "It's a body";
app.appendChild(body);

const footer = document.createElement("div");
footer.innerHTML = "It's a footer";
app.appendChild(footer);

就如上面把所欲header body footer 3个module 都写在1个js
也就是讲1个html 对应1个js

这样写法弊端很明显

  1. 没有对js里的模块拆分， 当业务复杂时，js又长又丑
  2. 不方便模块的共享









传统html + js 写法2

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Original</title>
</head>
<body>
    <div id="app2"></div>
    
    <script src="./js/app2/header.js"></script>
    <script src="./js/app2/body.js"></script>
    <script src="./js/app2/footer.js"></script>
</html>

header.js

const app = document.getElementById("app2");

const header = document.createElement("div");
header.innerHTML = "It's a header";
app.appendChild(header);

body.js

//const app = document.getElementById("app2");
const body = document.createElement("div");
body.innerHTML = "It's a body";
app.appendChild(body);

footer.js

//const app = document.getElementById("app2");
const footer = document.createElement("div");
footer.innerHTML = "It's a footer";
app.appendChild(footer);

这种写法，只是简单把原来的js文件拆分成各个module.js
但是弊端也很多

  1. body.js footer.js 都隐含依赖 header.js 的app 对象， app对象只能在header里创建一次. 这个坑导致以后的维护更加困难， 业务复杂的时候， 无用的模块不能顺便删除.
  2. html 引用的js顺序不能随便变动。 否则html dom顺序就乱了.
  3. 还是用面向过程的编程思想








面向对象html + js 写法3

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Original</title>
</head>
<body>
    <div id="app3"></div>
    
    <script src="./js/app3/baseObj.js"></script>
    <script src="./js/app3/body.js"></script>
    <script src="./js/app3/footer.js"></script>
    <script src="./js/app3/header.js"></script>
    <script src="./js/app3/app3.js"></script>
</html>

baseObj.js

class BaseObj{
  constructor(app) { // app is a div obj
    this.app = app;
  }

  createContent(content){
    const div = document.createElement("div");
    div.innerHTML = content;
    this.app.appendChild(div);
  }
}

export default BaseObj;

app3.js

const app3 = document.getElementById("app3");

new Header(app3).createContent("It's a Header!");
new Body(app3).createContent("It's a new Body!");
new Footer(app3).createContent("It's a new Footer!");

header.js

class Header extends BaseObj{
    
    /**
     *  @override
     */
    createContent(content){
        const div = document.createElement("div");
        div.innerHTML = "header:";
        this.app.appendChild(div);
        super.createContent(content);
    }
}

body.js

class Body extends BaseObj{
    /**
    *  @override
    */
    createContent(content){
        const div = document.createElement("div");
        div.innerHTML = "body:";
        this.app.appendChild(div);
        super.createContent(content);
    }

}

footer.js

class Footer extends BaseObj{
    /**
    *  @override
    */
    createContent(content){
        const div = document.createElement("div");
        div.innerHTML = "footer:";
        this.app.appendChild(div);
        super.createContent(content);
    }
}

有点像写java了， 这种写法有了对象和继承的编程思想， 维护和可扩展性更好。
但是还是有一些缺点

  1. 引用都在html上， js上某些东西不知道怎么来的.
  2. html要引用多个js文件， 而且顺序也是不能随便调， 虽然header body footer 这3个引用的顺序不重要， 但是app3.js 还是必须在最后.

当运行时， 浏览器要下载多个js， 也就是必须与服务器进行多次沟通， 增加了服务器压力和影响了性能。
在这里插入图片描述








使用import + http服务器的 写法4

这次我会使用去解决上面写法3的第一个问题， 尝试在js文件之间生命引用

首先， 我们尝试去在js里引用别的js
header.js

import BaseObj from "./baseObj.js"
class Header extends BaseObj{
    
    /**
     *  @override
     */
    createContent(content){
        const div = document.createElement("div");
        div.innerHTML = "header:";
        this.app.appendChild(div);
        super.createContent(content);
    }
}

export default Header;

body.js

import BaseObj from "./baseObj.js"
class Body extends BaseObj{
    /**
    *  @override
    */
    createContent(content){
        const div = document.createElement("div");
        div.innerHTML = "body:";
        this.app.appendChild(div);
        super.createContent(content);
    }

}

export default Body;

footer.js

import BaseObj from "./baseObj.js"
class Footer extends BaseObj{
    /**
    *  @override
    */
    createContent(content){
        const div = document.createElement("div");
        div.innerHTML = "footer:";
        this.app.appendChild(div);
        super.createContent(content);
    }
}

export default Footer;

app4.js

import Header from "./header.js"
import Body from "./body.js"
import Footer from "./footer.js"

const app4 = document.getElementById("app4");

new Header(app4).createContent("It's a Header!");
new Body(app4).createContent("It's a new Body!");
new Footer(app4).createContent("It's a new Footer!");

这样js之间的引用关系全部在js里体现了
然后我们在html里只引用app4.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Original</title>
</head>
<body>
    <div id="app4"></div>
    <script src="./js/app4/app4.js"></script>
</html>

但是执行时我们会遇到一个错误
在这里插入图片描述
这是因为import 这关键字其实是ES6 的规范， 浏览器是默认下不能解析这关键字的， 我们需要 把引用script的类型改成module， 而不是默认的text/javascript

<!-- <script src="./js/app4/app4.js"></script> -->
<script type="module" src="./js/app4/app4.js"></script>

再次执行时我们会遇到CORS error
在这里插入图片描述
这是因为 我们使用了file协议， 在浏览器运行必须启用1个http 服务器

我们把代码文件放入tomcat运行
在这里插入图片描述
这次引用成功了， 但是虽然我们在html文件只声明了app4.js 的引用， 但是实际上浏览器还是需要去下载app4.js依赖的其他引用。
所以写法3的第二个问题未解决。

而且调试时需要http 服务器， 并不是很方便。









使用webpack 的写法5

这次我们要解决多次下载js文件的问题， 根本办法就是把多个js文件整合成1个js文件。
问题时这不又回去写法1了吗？

而webpack 提供的js文件打包功能就立功了， 开发时我们会把js代码拆分多个文件， 而部署调试时，可以用webpack去把多个js文件打包成1个main.js

这时我们先在项目文件夹安装webpack

npm init -y
npm install webpack --save-dev
npm list

❯ npm list
webpack1@1.0.0 /home/gateman/Projects/jsproject/webpack1
├── webpack-cli@5.0.1
└── webpack@5.75.0

接下来我们用webpack 去打包 app4.js, 因为这时入口js文件

❯ npx webpack ./js/app4/app4.js --mode=production
asset main.js 739 bytes [emitted] [minimized] (name: main)
orphan modules 1.16 KiB [orphan] 4 modules
./js/app4/app4.js + 4 modules 1.45 KiB [built] [code generated]
webpack 5.75.0 compiled successfully in 282 ms

这时会在项目文件夹下生成 ./dist/main.js文件

在html中我们只需要引用 main.js

<body>
    <div id="app4"></div>
    
    <!-- <script type="module"src="./js/app4/app4.js"></script> if use type=module, we need a http server to aovid the CORS error-->
    <script src="./dist/main.js"></script>
</html>

注意不需要 使用type=“module” 因为webpack 会把js 的ES6 语法翻译成浏览器默认能处理的ES5 语法。 否则调试时还是需要http server.

然后我们就可以在浏览器测试了
在这里插入图片描述
可以见到， 浏览器只需要下载1次 main.js 而且把所有的 js文件内容 打包了main.js文件中！
问题解决！









所以为什么要使用webpack？

  1. 鼓励我们使用面像对象思想去编写javasript， 令代码分层次，所谓的模块化编程。
  2. 部署时整合多个js文件， 减少客户端/浏览器对服务器的调用次数。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/81538.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

mysql高可用（MHA集群）

mysql高可用（MHA集群）

目录 一、MHA概述 &#xff08;1&#xff09;什么是MHA &#xff08;2&#xff09;MHA的组成 1&#xff09;MHA Node&#xff08;数据节点&#xff09; 2&#xff09;MHA Manager&#xff08;管理节点&#xff09; &#xff08;3&#xff09;MHA的特点 二、搭建mysql HMA…
阅读更多...
软件体系结构复习文档

软件体系结构复习文档

引言&#xff1a; 软件体系结构是大三下学期我们学的一门专业课&#xff0c;这门课学院给我们安排的是一名女老师上的&#xff0c;课没给我留下多深的印象&#xff0c;女老师倒是给我留下了深刻的印象&#xff0c;温柔&#xff0c;漂亮、高挑。上完每节课老师都把ppt和资料发到…
阅读更多...
基于Android与多媒体的英文学习APP的设计

基于Android与多媒体的英文学习APP的设计

毕业设计&#xff08;论文&#xff09;任务书 第1页 毕业设计&#xff08;论文&#xff09;题目&#xff1a;基于Android与多媒体技术的英文学习APP的设计与实现设计&#xff08;论文&#xff09;要求及原始数据&#xff08;资料&#xff09;&#xff1a;1&#xff0e;综述国…
阅读更多...
深入理解Java虚拟机：（一）Java代码是如何运行的？

深入理解Java虚拟机：（一）Java代码是如何运行的？

jdk 的子目录下也存在一个 jre。 而我 C盘目录下也有一个 jre。 这两个 jre 有啥联系吗&#xff1f; 答案是&#xff1a;没有联系。甚至准确的来说&#xff0c;它俩是一样的&#xff0c;无论是用哪一个都是可以的。只是很多人习惯将会单独安装另一个 jre&#xff0c;虽然单独…
阅读更多...
017 | JavaWeb企业进销存管理系统源码附带毕业设计论文 | 大学生毕业设计 | 极致技术工厂

017 | JavaWeb企业进销存管理系统源码附带毕业设计论文 | 大学生毕业设计 | 极致技术工厂

进销存管理系统是一个基于Internet的应用系统&#xff0c;它是一个面对当前的进销存管理工作基本还处于手工和半信息自动化处理状态而应运而生的一个基于Internet的一个完全信息自动化的系统&#xff0c;整个系统从符合操作简便、界面友好、灵活、实用、安全的要求出发&#xf…
阅读更多...
100天精通Python（数据分析篇）——第68天：Pandas数据清洗函数大全

100天精通Python（数据分析篇）——第68天：Pandas数据清洗函数大全

文章目录每篇前言1. duplicated()2. drop_duplicates()3. isnull()4. notnull()5. dropna()6. fillna()7. ffill()8. bfill()9. replace()10. str.replace()11. str.split.str()每篇前言 &#x1f3c6;&#x1f3c6;作者介绍&#xff1a;Python领域优质创作者、华为云享专家、阿…
阅读更多...
在PostgreSQL中通过dblink兼容Oracle数据库中的自治事务

在PostgreSQL中通过dblink兼容Oracle数据库中的自治事务

1、数据库事务原子性的局限与自治事务 1.1、事务原子性概述 如下所示&#xff0c;如果一个事务中有A和B两个数据的插入操作&#xff0c;当A的SQL语句执行成功后&#xff0c;因为某种原因&#xff08;如服务器断电等&#xff09;&#xff0c;导致B的SQL语句执行失败&#xff0…
阅读更多...
微服务框架 SpringCloud微服务架构 微服务保护 32 隔离和降级 32.3 线程隔离【舱壁模式】

微服务框架 SpringCloud微服务架构 微服务保护 32 隔离和降级 32.3 线程隔离【舱壁模式】

微服务框架 【SpringCloudRabbitMQDockerRedis搜索分布式&#xff0c;系统详解springcloud微服务技术栈课程|黑马程序员Java微服务】 微服务保护 文章目录微服务框架微服务保护32 隔离和降级32.3 线程隔离【舱壁模式】32.3.1 线程隔离【舱壁模式】32.3.2 案例32.3.3 总结32 隔…
阅读更多...
【BBuf的CUDA笔记】一，解析OneFlow Element-Wise 算子实现

【BBuf的CUDA笔记】一，解析OneFlow Element-Wise 算子实现

0x0. 前言 由于CUDA水平太菜&#xff0c;所以一直没写过这方面的笔记。现在日常的工作中已经不能离开写CUDA代码&#xff0c;所以准备学习ZZK随缘做一做CUDA的笔记记录一下学习到的知识和技巧。这篇文章记录的是阅读OneFlow的Element-Wise系列CUDA算子实现方案学习到的技巧&am…
阅读更多...
MySQL主从复制与读写分离

MySQL主从复制与读写分离

目录 前言 一、MySQL主从复制的理解 1、MySQL的复制类型 2、MySQL主从复制的工作流程 3、MySQL架构&#xff08;一主多备&#xff09; 3.1 一主多备 3.2 M-S-S 3.3 M-M/双主互备 &#xff08;互为主从&#xff09; 3.4 M-M-M 4、MySQL主从复制延迟原因 5、MySQL主从…
阅读更多...
FL Studio2023最新版编曲音乐制作数字音频软件

FL Studio2023最新版编曲音乐制作数字音频软件

FL Studio2023即“Fruity Loops Studio”&#xff0c;也就是众所熟知的水果软件&#xff0c; 全能音乐制作环境或数字音频工作站&#xff08;DAW&#xff09;。FL Studio可以编曲、剪辑、录音、混音&#xff0c;让你的计算机成为全功能录音室。 FL Studio2023是一个完整的软件音…
阅读更多...
学术分享 | 清华大学 康重庆：电力系统碳计量技术与应用（Matlab代码实现）

学术分享 | 清华大学 康重庆：电力系统碳计量技术与应用（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️❤️&#x1f4a5;&#x1f4a5;&#x1f4a5;​ &#x1f4cb;&#x1f4cb;&#x1f4cb;本文目录如下&#xff1a;⛳️⛳️⛳️ 目录 ​ 0 写在最前面 1 学术分享 | …
阅读更多...
MATLB|改进遗传算法优化微电网调度（考虑环境）

MATLB|改进遗传算法优化微电网调度（考虑环境）

&#x1f4a5;&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️❤️&#x1f4a5;&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑…
阅读更多...
Redis 高可用之持久化

Redis 高可用之持久化

Redis 高可用之持久化Redis 高可用什么是高可用Redis的高可用技术Redis持久化持久化的功能Redis提供两种方式进行持久化&#xff1a;RDB持久化触发条件bgsave执行流程启动时加载AOF持久化&#xff08;支持秒级写入&#xff09;开启AOF执行流程启动时加载RDB和AOF的优缺点RDB持久…
阅读更多...
CSC7261M

CSC7261M

CSC7261M是一款内置高压MOS的高性能、多工作模式的PWM控制芯片&#xff0c;内置多种保护机制。当系统为空载和轻载时&#xff0c;芯片采用Burst和Green控制模式可有效地减少了空载和轻载时的损耗。当系统为中载和重载时&#xff0c;CSC7261M芯片采用CCM模式可有效提升电源系统的…
阅读更多...
校招面试中常见的算法题整理【长文】

校招面试中常见的算法题整理【长文】

⭐️我叫恒心&#xff0c;一名喜欢书写博客的研究生在读生。 原创不易~转载麻烦注明出处&#xff0c;并告知作者&#xff0c;谢谢&#xff01;&#xff01;&#xff01; 这是一篇近期会不断更新的博客欧~~~ 有什么问题的小伙伴 欢迎留言提问欧。 文章目录前言一、链表问题1 合并…
阅读更多...
Anaconda安装详细教程

Anaconda安装详细教程

一、Anaconda下载 &#xff08;1&#xff09;方式一&#xff1a;Anaconda官网 不推荐使用官网下载&#xff1a; &#xff08;1&#xff09;官网下载速度非常慢&#xff0c;需要使用国内源下载 &#xff08;2&#xff09;官网下载的是最新版本&#xff0c;可能使用时会出现意料…
阅读更多...
基于java+springboot+mybatis+vue+mysql的地方废物回收机构管理系统

基于java+springboot+mybatis+vue+mysql的地方废物回收机构管理系统

项目介绍 地方废物回收机构管理系统能够通过互联网得到广泛的、全面的宣传&#xff0c;让尽可能多的用户了解和熟知地方废物回收机构管理系统的便捷高效&#xff0c;不仅为用户提供了服务&#xff0c;而且也推广了自己&#xff0c;让更多的用户了解自己。对于地方废物回收机构…
阅读更多...
【 SQLite3移植到ARM Linux教程】

【 SQLite3移植到ARM Linux教程】

SQLite3移植到ARM Linux教程1 下载 SQLite3源码2 复制并解压源码包3 配置编译选项4 编译5 去除调试信息6 复制文件7 运行测试sqlite3SQLite 是一款轻型的数据库&#xff0c;是遵守ACID的关联式数据库管理系统&#xff0c;它的设计目标是嵌入式的&#xff0c;而且目前已经在很多…
阅读更多...
MyBatis如何处理表关联

MyBatis如何处理表关联

实体类 学生表 添加对应对象 - 教师 private Teacher teacher; 2. Mapper添加对应结果集映射 collection 一对多 学科表 对 学生表 1. 实体类 学科 添加对应集合 – 学生 private List<Student> stuList; 2. Mapper添加对应结果集映射 使用ResultType实现结果多表映…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023