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