文章の目录

• 一、创建列表隔行变色项目
• • 1、新建项目空白目录
  • 2、新建src源代码目录
  • 3、新建src -> index.html首页
  • 4、初始化首页基本的结构
  • 5、运行 `npm install jquery -S`命令，安装jQuery
  • 6、通过模块化的形式，实现列表隔行变色效果
• 二、在项目中安装和配置 webpack
• • 1、运行 `npm install webpack webpack-cli -D` 命令，安装 webpack 相关的包
  • 2、在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件
  • 3、在 webpack 的配置文件中，初始化如下基本配置：
  • 4、在 package.json 配置文件中的 scripts 节点下，新增 dev 脚本如下：
  • 5、在终端中运行 npm run dev 命令，启动 webpack 进行项目打包。
• 三、示例
• 写在最后

一、创建列表隔行变色项目

1、新建项目空白目录

运行 npm init -y命令，初始化包管理配置文件 package.json

2、新建src源代码目录

3、新建src -> index.html首页

4、初始化首页基本的结构

5、运行 npm install jquery -S命令，安装jQuery

6、通过模块化的形式，实现列表隔行变色效果

二、在项目中安装和配置 webpack

1、运行 npm install webpack webpack-cli -D 命令，安装 webpack 相关的包

2、在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件

3、在 webpack 的配置文件中，初始化如下基本配置：

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

4、在 package.json 配置文件中的 scripts 节点下，新增 dev 脚本如下：

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

5、在终端中运行 npm run dev 命令，启动 webpack 进行项目打包。

三、示例

index.html

本文件中引用的是打包后的main.js文件

1
2
3
4
5
6
7
8
9
10

index.js

import $ from "jquery";
$(function () {$("li:odd").css("backgroundColor", "blue");$("li:even").css("backgroundColor", "lightblue");
});
console.log(1111);

package.json

{"name": "zz","version": "1.0.0","description": "","main": "index.js","scripts": {"dev": "webpack","test": "echo \"Error: no test specified\" && exit 1"},"keywords": [],"author": "","license": "ISC","dependencies": {"jquery": "^3.3.1"},"devDependencies": {"webpack": "^5.75.0","webpack-cli": "^5.0.1"}
}

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\~~~
谢谢各位读者们啦(^_^)∠※！！！