新建一个空的文件夹，在文件夹地址栏输入 cmd 打开终端 输入 npm init -y 这就创建了一个 package.json
使用 visual studio 打开 change-rows-color 这个文件夹，并新建 src 文件夹，在 src 文件夹下新建 index.html , index.js
在index.html 中创建九个列
ul>li{ 这是第 $ 个 li}*9 按 Tab 自动补全
?安装 jquery?
在文件夹 输入 cmd 进入终端 ，输入 npm i jquery -S
?在 index.js 中导入 jquery 新建函数
// 使用 es6 导入 jquery
import $ from 'jquery'
// 定义 jquery 函数
$(function () {
// 实现奇偶行变色
$('li:odd').css('background-color','red')
$('li:even').css('background-color','blue')
})在 index.html 中引入 index.js ,打开浏览器，发现页面样式并没有生效，并报错，这是因为浏览器对 es6 的不兼容。
解决：需要安装 webpack 两个包 npm install webpack@5.5.1 webpack-cli@4.2.0 -D
1.在根目录中创建 wepack.config.js 的 webpack 配置文件，初始化如下配置
module.exports = {
mode: 'development' // mode用来指定构建模式。可选值有 development和 production
}development (开发环境)不会对打包生成的文件进行代码压缩和性能优化,打包速度快，适合在开发阶段使用.
production(生产环境)会对打包生成的文件进行代码压缩和性能优化,打包速度很慢，仅适合在项目发布阶段使用.
2.在package.json 的 scripts? 节点下，新增 '' dev '' 脚本，如下
script 节点下的脚本，可以通过 npm run 执行。例如 npm run dev。
webpack 默认的打包入口文件为src-> index.js ? ?默认的输出文件路径为dist->main.js 。如果要自定义打包的入口与出口，在webpack.config.js配置文件中，通过entry 节点指定打包的入口。通过output节点指定打包的出口。如下：（webpack 自动打包第三方常用的插件 webpack-dev-server （实时打包的文件存在内存中，不在可见的物理磁盘）、html-webpack-plugin ）
// 导入一个 node 中的 包，用来打包自定义路径用
const path = require('path')
module.exports = {
mode: 'development' , // mode用来指定构建模式。可选值有 development和 production
// 指定打包的入口
entry:path.join(__dirname, './src/index.js'),
// 指定打包的出口
output:{
// 表示输出文件的存放路径
path:path.join(__dirname,'./dist'),
// 表示输出文件的名称
filename:'bundle.js'
}
}
3.在终端中运行npm run dev 命令，启动webpack进行项目的打包构建。
新生成了一个 dist 文件夹，里面包含了一个 main.js 文件。如图
?4.把原来 index.html 中引入的 index.js 改为 dist 下的 main.js?
<script src="../dist/main.js"></script>打开index.html
