前端学习之webpack

概述

webpack是一个流行的前端项目构建工具(打包工具),可以解决当前web开发中所面临的问题。
webpack提供了友好的模块化支持,以及代码压缩混淆、处理js兼容问题、性能优化等强大的功能,从而让程序员把工作重心放到具体的功能实现上,提高了开发效率和项目的可维护性。

webpack的基本使用

  1. 创建列表各行变色项目
    ①新建项目空白目录,并运行npm init -y命令,初始化包管理配置文件package.json
    ②新建src源代码目录
    ③新建src->index.html首页
    ④初始化首页基本的结构,即给index.html添加如下内容:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- <script src="./index.js"></script> --><script src="../dist/main.js"></script>
</head>
<body><ul><li>这是第1个标签</li><li>这是第2个标签</li><li>这是第3个标签</li><li>这是第4个标签</li><li>这是第5个标签</li><li>这是第6个标签</li><li>这是第7个标签</li><li>这是第8个标签</li><li>这是第9个标签</li></ul>
</body>
</html>

⑤运行npm install jquery -s命令,安装jQuery
⑥通过模块化的形式,实现列表隔行变色的效果
创建一个index.js文件,加入以下内容:

import $ from 'jquery'
//给奇偶行设置不同的背景色
$(function(){$('li:odd').css('backgroundColor','pink')$('li:even').css('backgroundColor','green')
})

然后在index.html文件中通过以下命令将index.js引入进来:

<script src="./index.js"></script>

但是我们通过浏览器查看,发现列表变色并没有设置成功,这是因为index.js里面的内容是ES6的书写格式,浏览器不识别;这个时候我们可以使用webpack进行打包,将没有兼容性的代码转化为有兼容性的代码,最后在index.html中引入的应该是我们使用webpack转换后的js代码,具体操作见下述2
2. 在项目中安装和配置webpack
①运行npm install webpack webpack-cli -D命令,安装webpack相关的包
②在项目根目录中,创建名为webpack.config.js的webpack配置文件
③在webpack配置文件中,初始化如下基本配置

module.exports={mode:'development'   //mode用来指定构建模式
}

④在package.json配置文件中的scripts节点下,新增dev脚本如下:

"scripts":{"dev":"webpack"    //scripts节点下的脚本可以通过npm run 执行
}

⑤在终端执行npm run dev命令,启动webpack进行项目打包
执行完这个命令后会在根目录生成一个dist文件夹,文件夹中有一个main.js文件,就是我们转换后的文件,将这个文件引入index.html中,就能够实现上述的列表变色了

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

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

相关文章

RT-Thread内核——内核基础(上)

1、内核简介 内核是操作系统的核心&#xff0c;是操作系统最基础也是最重要的部分&#xff0c;主要负责系统的线程、线程间通信、系统时钟、中断以及内存等。其架构图如下&#xff1a; 2、线程调度 线程是RT-Thread操作系统中最小的调度单位&#xff0c;线程调度算法的基于…

CentOS 7 安装和配置java环境

1 安装包准备 安装包可以通过下面地址进行版本选择安装&#xff1a; https://www.oracle.com/java/technologies/downloads/#java8 2 正式开始安装 本次分享的安装方法直接通过编辑/etc/profile文件实现java的安装 2.1 新建安装包存放目录 mkdir /java cd /java/ 2.2 解压安…

【C/C++】函数重载注意事项

函数重载概述 函数重载满足条件&#xff1a; 同一个作用域下函数名称相同函数参数类型不同 或者 个数不同 或者 顺序不同 注意: 函数的返回值不可以作为函数重载的条件。 函数重载注意事项 引用作为重载条件函数重载碰到函数默认参数 //函数重载注意事项 //1、引用作为重载…

RDBMS 的历史回顾

“数据库”这个词是怎么来的&#xff1f;当 SQL 是 SEQUEL 时它代表什么&#xff1f;通过这篇有关 RDBMS 历史的文章了解所有这些内容以及更多内容。 埃里克迪特里希用户头像 经过 埃里克迪特里希 核心 Anush Gasparyan 用户头像 经过 阿努什加斯帕里安 2017年7月21日 意见…

Redis(10)| I/O多路复用(mutiplexing)

上文select/epoll 在上文《Redis&#xff08;09&#xff09;| Reactor模式》 思考问题可以使用I/O多路复用技术解决多多客户端TCP连接问题&#xff0c;同时也提到为了解决最早期的UNIX系统select调用存在的四个问题。 select(int nfds, fd_set *r, fd_set *w, fd_set *e, stru…

机器学习第一周

一、概述 机器学习大致会被划分为两类&#xff1a;监督学习&#xff0c;无监督学习 1.1 监督学习 监督学习其实就是&#xff0c;给计算机一些输入x和正确的输出y&#xff08;训练数据集&#xff09;&#xff0c;让他总结x->y的映射关系&#xff0c;从而给他其他的输入x&a…

Docker安全

目录 一. cgroup 2. cpu优先级 3. 内存资源限制 4. 磁盘io限制 二. lxcfs隔离 三. 容器特权 一. cgroup 1. cpu资源限制 docker run -it --rm --cpu-period 100000 --cpu-quota 20000 ubuntu root433a1612a171:/# dd if/dev/zero of/dev/null & 2. cpu优先级 docker run -i…

2.11、自定义图融合过程与量化管线

introduction 介绍如何自定义量化优化过程&#xff0c;以及如何手动调用优化过程 code from typing import Callable, Iterableimport torch import torchvisionfrom ppq import (BaseGraph, QuantizationOptimizationPass,QuantizationOptimizationPipeline, QuantizationS…

探营云栖大会:蚂蚁集团展出数字人全栈技术,三大AI“机器人”引关注

一年一度的科技盛会云栖大会将于10月31日正式开幕。30日&#xff0c;记者来到云栖大会展区探营&#xff0c;提前打卡今年上新的“黑科技”。 记者在蚂蚁集团展馆看到&#xff0c;超1亿人参与的亚运“数字火炬手”全栈技术首次公开展示&#xff0c;还可体验基于数字人技术的“数…

什么是全排列?(算法实现)

全排列是什么&#xff1f; 全排列是指将一组元素按照一定顺序进行排列的所有可能结果。以一组数字为例&#xff0c;比如[1, 2, 3]的全排列结果为&#xff1a;[1, 2, 3], [1, 3, 2], [2, 1, 3], [2, 3, 1], [3, 1, 2], [3, 2, 1]。 全排列有许多不同的计算方法&#xff0c;其中…

云服务器搭建Zookeeper集群

文章目录 1.集群配置2.zookeeper的群起脚本3. Zookeeper节点的创建和删除相关4. Zookeeper的选举机制 1.集群配置 Zookeeper的集群个数最好保证是奇数个数&#xff0c;因为Zookeeper的选举过程有一个“半数机制”。 5台服务器&#xff0c;可以设置Zookeeper的集群为3或者5&…

大数据学习(18)-任务并行度优化

&&大数据学习&& &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 承认自己的无知&#xff0c;乃是开启智慧的大门 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4dd;支持一下博主哦&#x1f91…

uniapp实现公众号微信登录

前端代码 data() {return {openid: "",server: ,code:}; }, mounted() {this.getCode() }, methods:{getCode() {// 非静默授权&#xff0c;第一次有弹框this.code ;var callback_url 回调地址; // 获取页面urlvar appid APPID;this.code this.getUrlCode().cod…

通信原理板块——卷积码(原理、代数和几何表示、编码和解码)

微信公众号上线&#xff0c;搜索公众号小灰灰的FPGA,关注可获取相关源码&#xff0c;定期更新有关FPGA的项目以及开源项目源码&#xff0c;包括但不限于各类检测芯片驱动、低速接口驱动、高速接口驱动、数据信号处理、图像处理以及AXI总线等 1、卷积码定义 卷积码(convolution…

uboot - 驱动开发 - 驱动模型

说明 类似于linux&#xff0c;为了规范、统一驱动适配和驱动接口调用&#xff0c;uboot定义了一套驱动模型(Driver Model)&#xff0c;简称DM。本文基于&#xff1a;u-boot-2021.10。 优点 为同一类ip的驱动定义了统一的操作接口&#xff0c;DM在软件层面做了一定的抽象。分…

SM2协同签名算法

在介绍SM2协同签名之前&#xff0c;先介绍下门限签名机制&#xff0c;提到门限签名就不得不提区块链&#xff0c;在与区块链的结合应用中&#xff0c;门限签名的优势在于签名的生成是通过链下的 MPC 协议产生的&#xff0c;其结果是更加安全&#xff0c;避免了合约被黑客攻击的…

网络工程综合试题(二)

1. SR技术有哪些缺点&#xff1f; SR&#xff08;Segment Routing&#xff09;技术是一种新兴的网络编程技术&#xff0c;它具有很多优点&#xff0c;但也存在一些缺点&#xff0c;包括&#xff1a; 部署复杂性&#xff1a;SR技术需要对网络进行改造和升级&#xff0c;包括更新…

基于SpringBoot的企业财务管理系统

目录 前言 一、技术栈 二、系统功能介绍 管理员功能实现 财务人员管理 留言管理 薪资管理 财务人员功能实现 报销信息管理 收费信息管理 支出信息管理 员工功能实现 报销信息管理 留言管理 薪资查询 三、核心代码 1、登录模块 2、文件上传模块 3、代码封装 前…

研究生安排

研一 看论文不懂先记着 论文一定多看的&#xff0c;建议300篇论文&#xff0c;500最好。 选题的时候要心里有谱&#xff0c;先找小论文&#xff0c;再找大论文 研二 确定研究方向和目标 和老师切磋研究的是什么 明确要做的东西是什么&#xff0c;是否已经明确要做什么&#xff…

kubernetes组件

基本队对象 pod 最小单位 service 跟网络相关 Volume Namespace 准备工作&#xff1a; master (1) node1 node2 初始化 做本地解析 10.0.0.51 10.0.0.56 10.0.0.186 关闭swap分区&#xff1a;sed -i s/.*swap.*