使用webpack打包js文件(隔行變色案例)
1.webpack安裝的兩種方式
- 運行
npm i webpack -g全局安裝webpack，這樣就能在全局使用webpack的命令 - 在項目根目錄中運行
npm i webpack --save-dev安裝到項目依賴中
2.初步使用webpack打包構建列表隔行變色案例
項目結構:
image
- 運行
npm init -y初始化項目，使用npm管理項目中的依賴包 - 創建項目基本的目錄結構
- 使用
npm i jquery -s安裝jquery類庫 - 創建
main.js並書寫隔行變色的代碼邏輯：
// 導入jquery類庫
import $ from 'jquery'
$(function () {
// 設置奇數行背景色
$('li:odd').css('background-color','lightblue')
// 設置偶數行背景色，索引從0開始，0是偶數
$('li:even').css('background-color',function () {
return '#'+'F15A24'
})
})- 直接在頁面上引用
main.js會報錯，因爲瀏覽器不認識import這種高級的JS語法，需要使用webpack進行處理，webpack默認會把這種高級的語法轉換爲低級的瀏覽器能識別的語法； - 運行
webpack 入口文件路徑 輸出文件路徑對main.js進行處理：
webpack src/js/main.js -o dist/bundle.js
注意如果提示沒有webpack-cli,安裝:
npm install webpack-cli -g
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Title</title>
<style>
</style>
<!--注意不推薦在這裏引入任何包和css文件-->
<!--由於es6語法瀏覽器不識別 會報錯-->
<script src="../dist/bundle.js"></script>
</head>
<body>
<ul>
<li>這是第1個li</li>
<li>這是第2個li</li>
<li>這是第3個li</li>
<li>這是第4個li</li>
<li>這是第5個li</li>
<li>這是第6個li</li>
<li>這是第7個li</li>
<li>這是第8個li</li>
<li>這是第9個li</li>
<li>這是第10個li</li>
</ul>
</body>
</html>