Vue学习14-----webpack基本使用之实现隔行变色

1、初始化包配置文件管理配置文件

npm init -y

2、创建一个src文件夹

3、创建一个index.html，引入index.js

4、index.html创建ul、li

 ul>li{这是第$个li}*9

5、安装jq

npm i jquery -s

6、创建index.js

import $ from 'jquery'

$(function(){
    //奇数行
    $('li:odd').css('backgroundColor','pink'),
    //偶数行
    $('li:even').css('backgroundColor','blue');
})

//以上完成后并不能实现隔行变色效果，因为页面解析不了当前inde.js的高阶js用法

解决：

1、安装相关依赖包

npm i webpack webpack-cli -D

2、创建webpack.config.js

module.exports = {
    //编译模式
    mode:'development'//development production
}

3、在package.json中增加

"dev":"webpack"

4、执行

npm run dev

会生成一个dist文件夹，里面会有一个main.js文件即等同于index.js

然后再index.html中引用main.js