构建工具Webpack简介

一、构建工具

当我们习惯了Node中使用ES模块化编写代码以后,用原生的HTML、CSS、JS这些东西会感觉到各种不便。比如:不能放心的使用模块化规范(浏览器兼容性问题)、即使可以使用模块化规范也会面临模块过多时的加载问题。

这时候我们就希望有一个工具能对代码进行打包,将多个模块打包成一个文件。这样一来即解决了兼容性问题,又解决了模块过多的问题。

构建工具就起到这样一个作用,通过构建工具库将使用ESM规范编写的代码转换为旧的JS语法,这样可以使得所有的浏览器可以支持代码。

二、Webpack的使用步骤

1. 初始化项目

npm init -y

2. 安装依赖

npm i -D webpack webpack-cli

这里使用-D目的是为了安装开发依赖,我们只需要在开发的时候使用Webpack打包工具,在实际的项目中是不需要使用的。

3. 在项目中创建src目录

4. 执行 对代码进行打包

npx webpack

5. 观察dist文件 

 

dist下面的main.js中的内容与index.js中的内容是相同的

当我们代码比较简单的时候,我们并不能看出Webpack打包工具的具体作用。

我们创建一个模块1和模块2,分别是创建一个H1标签和在控制台输出“你好,Webpack”。

在index.js中引入和使用这两个模块

对代码进行打包

观察我们会发现原本src里有3个目录,而打包过后始终只有main.js这一个文件,并且文件中的代码只显示在一行。

 对代码进行格式化,这就是Webpack最终为我们打包的代码。

 在html文件中调用查看效果

三、Webpack配置文件

在项目文件夹下创建webpack.config.js文件,该文件就是Webpack的配置文件

注意:该文件中遵循Node.js的代码格式规范 ,需要对导出配置文件中的内容

我们刚才在使用npm webpack进行打包的时候的会收到一条报错,大致意思为mode未进行配置

进行配置即可

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

[Unity]GPU Instancing 无效的原因

参考: GPU Instancing 深入浅出-基础篇(1) - 知乎 Unity GPU Instance踩坑记录_为什么gpuinstance画不出图像_拯救人类的技术宅的博客-CSDN博客 GPUInstancing在真机上失效问题_安卓手机 unity gpu instancing报错__hiJ的博客-CSDN博客 补…

基于uniapp开发 软盒APP系统源码 软件库系统源码 全开源

软盒APP前端-基于uniapp,一个开源的软件库系统 前端开源地址:软盒APP前端-基于uniapp: 软盒APP前端-基于uniapp (gitee.com) 更新说明 更新日期:2023.07.24 v1.0.8.23724 1.修复部分接口 2.删除根据标签获取软件列表接口,整合…

JDBC和DBUtils框架的使用

课程目录 一、JDBC概述 二、JDBC基本操作 三、使用PreparedStatement处理CRUD 四、数据库连接池 五、Apache的DBUtils 六、Dao类 一、JDBC概述 1. 为什么需要JDBC 没有JDBC时: 有了JDBC后: 2. JDBC概述 JDBC:Java Database Conn…

东芝电视Z750的音画效果好吗?调校的够真实吗?

精准匹配声音与画面,呈现“音画合一”的影院级视听盛宴,东芝电视Z750真的很不错,东芝电视拥有70余年的原色调校技术,色彩看起来细腻且舒服,饱和度和景深等都处理的很恰当,而且还有火箭炮音响系统,也是经过日本专业调校的,针对不同家居场景,都有不同的声音处理方案,让我们听到的…

竞赛选题 基于深度学习的人脸表情识别

文章目录 0 前言1 技术介绍1.1 技术概括1.2 目前表情识别实现技术 2 实现效果3 深度学习表情识别实现过程3.1 网络架构3.2 数据3.3 实现流程3.4 部分实现代码 4 最后 0 前言 🔥 优质竞赛项目系列,今天要分享的是 基于深度学习的人脸表情识别 该项目较…

Flutter——启动页白屏的优化

flutter启动页白屏的优化&#xff1a;使用图片替代白屏 结构图 核心的代码如上图&#xff0c;修改两个launch_background.xml里的代码为&#xff1a; <item><bitmapandroid:gravity"center"android:src"mipmap/ic_launcher" /></item>…

数据库直连提示 No suitable driver found for jdbc:postgresql

背景&#xff1a;我在代码里使用直连的方式在数据库中创建数据库等&#xff0c;由于需要适配各个数据库服务所以我分别兼容了mysql、postgresql、oracal等。但是在使用过程中会出现错误&#xff1a; No suitable driver found for jdbc:postgresql 但是我再使用mysql的直连方式…

单例模式 c++

一、单例是什么 全局有且只有一个类的static实例。 二、c实现单例 2.1 一个好的单例应该具备下面4点 全局只有一个实例&#xff1a;static特性&#xff0c;同时禁止用户自己声明并定义实例&#xff08;把构造函数设为private&#xff09;线程安全禁止拷贝和赋值用户通过接口…

AutoAnimate - 无需任何配置,一行代码自动为元素添加优雅的过渡动画,可以搭配 Vue / React 和 Sevelt 使用

这个动画库只要一行代码就可以自动在我们的组件中添过渡动画&#xff0c;为什么这么省事高效呢&#xff1f; AutoAnimate 是一个无需任何配置&#xff0c;自动为我们开发的 Web 项目添加平滑过渡动画的 JavaScript 工具库。AutoAnimate 和之前推荐的一些 js 动画库相比&#x…

Redis---第三篇

系列文章目录 文章目录 系列文章目录一、redis集群方案二、redis 主从复制的核心原理一、redis集群方案 主从 哨兵模式: sentinel,哨兵是 redis 集群中非常重要的一个组件,主要有以下功能: 集群监控:负责监控 redis master 和 slave 进程是否正常工作。 消息通知:如果某…

UINT64整型数据在格式化时使用了不匹配的格式化符%d导致其他参数无法打印的问题排查

目录 1、问题描述 2、格式化函数内部解析待格式化参数的完整机制说明 2.1、传递给被调用函数的参数是通过栈传递的 2.2、格式化函数是如何从栈上找到待格式化的参数值&#xff0c;并完成格式化的&#xff1f; 2.3、字符串格式化符%s对应的异常问题场景说明 2.4、为了方便…

鸟哥的LInux私房菜 基础学习篇 第四版 学习笔记

第一章 目前被称为纯种的Unix指的是System V以及BSD这两套软件。 要实现多任务的环境&#xff0c;除了硬件&#xff08;主要是CPU&#xff09;需要能够具有多任务的特性外&#xff0c;操作系统也需要支持这个功能。 如果网络有问题时&#xff0c;去/var/log目录查日志。 第二…

腾讯轻联:带你创造属于自己的AI小助手

陈老老老板&#x1f934; &#x1f9d9;‍♂️本文专栏&#xff1a;生活&#xff08;主要讲一下自己生活相关的内容&#xff09;生活就像海洋,只有意志坚强的人,才能到达彼岸。 &#x1f9d9;‍♂️本文简述&#xff1a;参加腾讯全球数字生态大会&#xff0c;了解到腾讯轻联企业…

易基因直播预告|细菌微生物基因表达调控表观研究易基因科技

大家好&#xff0c;这里是专注表观组学十余年&#xff0c;领跑多组学科研服务的易基因。 DNA甲基化是在半个多世纪前在细菌中发现的。DNA碱基可以作为一个表观遗传调节因子——也就是说&#xff0c;它可以赋予相同的基因序列不同的和可逆的调控状态。在真核生物中&#xff0c;…

C++ -- 学习系列 std::array 容器

1. std::array 是什么&#xff1f; array 容器是 C 11 标准中新增的序列容器&#xff0c;简单地理解&#xff0c;它就是在 C 普通数组的基础上&#xff0c;添加了一些成员函数和全局函数。在使用上&#xff0c;它比普通数组更安全&#xff0c;且效率并没有因此变差。 与数组一…

Python模糊匹配(fuzzywuzzy package)

from fuzzywuzzy import fuzz from fuzzywuzzy import process1.关键方法说明 ratio 要字符完全一致&#xff0c;匹配精度才较高partial_ratio 要字符部分一致&#xff0c;匹配精度较高token_sort_ratio 即使字符顺序不一致&#xff0c;也能较好匹配token_set_ratio 即使字符顺…

【环境配置】基于Docker配置Chisel-Bootcamp环境

文章目录 Chisel是什么Chisel-Bootcamp是什么基于Docker配置Chisel-Bootcamp官网下载Docker安装包Docker换源启动Bootcamp镜像常用docker命令 可能产生的问题 Chisel是什么 Chisel是Scala语言的一个库&#xff0c;可以由Scala语言通过import引入。 Chisel编程可以生成Verilog代…

深入了解OSI模型:计算机网络的七大层次

目录 OSI模型 物理层 数据链路层 网络层 传输层 会话层 表示层 应用层 OSI模型 OSI模型是一个网络通信的概念模型&#xff0c;用于描述计算机网络中各个不同层次之间的通信和功能。它将网络通信分为七个不同的层次&#xff0c;每个层次负责不同的任务&#xff0c;使得网…

paddle框架的使用

Paddle是由百度开发的深度学习框架&#xff0c;支持声明式和命令式编程风格。它还支持深度神经网络的超大规模训练和神经架构的自动设计。您可以使用 Paddle 构建用于训练的神经网络模型&#xff0c;具体步骤如下&#xff1a; 导入桨模块和其他必要的模块&#xff0c;如numpy&…

golang 运算符

目录 1. golang 运算符1.1. Types of Operators1.2. Bitwise Operators (位运算符)1.3. Logical Operators (逻辑运算符)1.4. Arithmetic Operators (算术运算符)1.5. Assignment Operators (赋值运算符)1.6. Comparison Operators (比较运算符) 1. golang 运算符 1.1. Types …