webpack---实现列表隔行变色案例

最新推荐文章于 2023-05-28 13:02:25 发布
VIP文章 最新推荐文章于 2023-05-28 13:02:25 发布
阅读量373 收藏 2
点赞数 3
分类专栏： webpack 文章标签： jquery javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46186155/article/details/120518463
版权

一、介绍

本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

简要概述一下webpack是前端工程化的具体解决方案，它主要提供了有好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端JavaScript的兼容性、性能优化等强大的功能。

现在我们举一个webpack打包的小案例，实现列表隔行变色。

效果如下图：
在这里插入图片描述

二、案例实现

1、创建项目

  1. 新建项目空文件目录（纯英文），并运行npm init -y, 得到一个初始化包管理配置文件。
    在这里插入图片描述

  2. 新建src文件夹，并在里面创建index.html index.js

  3. 运行 npm install jquery -S ，安装jquery
    在这里插入图片描述

  4. 通过ES6模块化的方式导入jQuery，并实现隔行变色。

HTML部分

<!DOCTYPE html>
<html lang="en">

<head>
    <
最低0.47元/天 解锁文章
向歌啊
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack-upload-plugin:Webpack插件
05-13
webpack-upload-plugin介绍这是的插件。 主要目的是提供一个工具，用于将html（或其他语言的模板）中使用的js / css / img / font上传到cdn，然后将引用替换为相应的cdn url。环境要求节点> = 10.5.0安装npm i -D ...
vscod 技巧，自动循环书写li
weixin_33910434的博客
06-13 301
ul>li*10{这是第$个li} <ul> <li>这是第1个li</li> <li>这是第2个li</li> <li>这是第3个li</li> <li>这是第4个li</li> <li>这是第5个li</li> <li...
webpack的基本使用--实现列表的隔行变色效果
qq_44442911的博客
05-22 205
小例子 1、新建空白目录，运行npm init -y 来初始化包管理配置未见package.json 终端 npm init- y //会生成一个package.json文件 2、新建src源代码目录 3、在src下新建index.html首页和index.js脚本文件 4、初始化首页的基本结构 //shift+感叹号 快速建立html模板 //在body里面 //ul>li{这是第$个li}*9//快速生成列表 5、运行npm install jquery -S 来安装jQuery 终端
webpack的初步使用（隔行变色案例）
MMY_L的博客
04-01 345
经过演示 webpack可以做什么事情？ 1、webpack能够处理JS文件互相依赖的关系。 2、webpack能够处理js的兼容问题，把高级的浏览器不识别的语法转为低级的浏览器能识别的语法。 刚才运行的命令格式 webpack 要打包的文件路径 打包好输出的文件路径。
通过隔行变色案例了解webpack的使用
浪里个小胖子
05-07 239
1、搭建案例文件结构 2、在工作目录执行npm init -y进行初始化生成package.json文件 3、执行npm i jquery,配置main.js文件如下 // 导入jquery类库 import $ from 'jquery' $(function () { // 设置奇数行背景色 $('li:odd').css('backgroundColor', 'pink') ...
webpack打包构建列表隔行变色案例
weixin_55769952的博客
08-31 134
一、什么是Webpack？ Webpack 是一个前端资源加载/打包工具（项目构建工具）。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。 webpack 提供了友好的模块化支持，以及资源的合并、打包、压缩、混淆、处理 js 兼容问题、性能优化等强大的功能，从而让程序员把工作的重心放到具体的功能实现上，提高了开发效率和项目的可维护性。 二、webpack安装的两种方式 运行npm i webpack -g全局安装webpack，这样就能在全局使用webpack的命令
terser-webpack-plugin：Terser插件
02-06
terser-webpack-plugin 该插件使用来缩小JavaScript。入门如果您使用的是webpack v5或更高版本，则无需安装此插件。 Webpack v5随附了最新的terser-webpack-plugin 。 使用Webpack v4，您必须安装terser-webpack-...
webpack-使用webpack-dev-server.rar
04-12
webpack-dev-server 为你提供了一个简单的 web 服务器，并且能够实时重新加载。这里用一个最简单的例子，让大家迅速的了解原理，避免被其他的附加技术干扰。
monaco-editor-esm-webpack-plugin
05-30
monaco-editor-esm-webpack-plugin 它依赖于 。 如果你想复制一个带有本地化的 monaco 编辑器，你可以看到 用于 monaco 编辑器的 webpack 插件，用于编译工作程序并处理本地化。 安装 npm install monaco-editor-...
web-webpack-plugin：替代html-webpack-plugin
02-03
web-webpack-plugin 想全面学习Webpack？试试它： 不错替代品，可以使webpack将HTML用作条目并处理多页。 安装 npm i web-webpack-plugin --save-dev const { WebPlugin , AutoWebPlugin } = require ( 'web-...
Webpacket详解
m0_68231587的博客
05-28 78
Webpacket是一个基于Node.js的打包工具，用于将JavaScript文件和其它一些浏览器不能直接运行的资源打包成合适的格式。它由两部分组成：webpack和babel。其中，webpack负责打包和转换资源，而babel则负责处理各种转义规则，并将其转换成对应的js版本。此外，babel还可以根据项目需要，只加载需要处理的js兼容代码，从而减小体积。
webpack创建列表隔行变色项目
weixin_42541725的博客
02-27 356
webpack创建列表隔行变色项目
webpack扩展_隔行变色
laoli360的博客
09-22 84
webpack-案例-隔行变色 回顾从0准备环境 初始化包环境 下载依赖包 配置自定义打包命令 下载jquery yarn add jquery 3. 新建public/index.html - 前端首页 4. 新建src/main.js - webpack打包入口 index.html内容如下 <!DOCTYPE html> <html lang="en"> <head>..
Webpack
jplyue的博客
08-06 1850
1 安装 npm i -g wepack 2. 编写配置 遵循最基本的Nodejs书写规范 export default 12 … 导出整个模块就是12 export a 12 导出a ES6 有import export属性，但是所有的浏览器都不支持 module.exports = { // entry: 'src/1.js', output: { ...
webpack
weixin_39537579的博客
09-05 584
WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。 Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理...
webpack基础使用,实现隔行变色效果
King Saj
08-04 156
步骤: 效果: 文件夹目录: index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"
WebPack隔行换色案例
weixin_60020621的博客
02-21 449
在基础配置（具体可见基础打包）下，新建一个index.html。写入 <ul id="myUL"> <li>这是1</li> <li>这是2</li> <li>这是3</li> <li>这是4</li> <li>这是5</li> <li>这是6</li&...
webpack项目打包——以列表隔行变色项目为例
tingyu_的博客
08-27 335
1.首先新建一个空白文件夹，在终端打开 2.初始化包管理：执行命令npm init -y npm init -y 执行后结果：（执行后悔自动生成一个package.json的文件） 3.新建src源代码目录，并在src下创建首页index.html,并初始化页面结构 4.安装JQuery，在终端运行下面命令：(注意是安装jquery,而不是jQuery) npm install jquery -S 结果如下： 5。安装jQuery后，在src下l的index.js..
webpack基础介绍
qq_39148344的博客
03-11 190
自我学习，自我总结 wbpack 是什么 webpack是一种前端的资源构建工具，一个静态模块打包器（module bundler）。 在webpack看来，前端的所有资源文件（js/json/css/img/less/。。。）都应该作文模块处理 它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源（bundle） Wbpack的核心概念 Entry 入口（entry）指示webpack以哪一个文件为入口起点开始打包，分析构建内部依赖图 output 输出（output）指示we
webpack webpack-cli webpack-dev-server配置
最新发布
08-16
npm install webpack webpack-cli webpack-dev-server --save-dev ``` 4. 在项目根目录下创建一个`webpack.config.js`文件，并添加以下基本配置： ```javascript const path = require('path'); module....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值