文章の目录
- 一、创建列表隔行变色项目
- 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文件
Document
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^)\\\~~~
谢谢各位读者们啦(^_^)∠※
!!!