js文件引用 webpack_使用webpack打包js文件(隔行变色案例)

使用webpack打包js文件(隔行变色案例)

1.webpack安装的两种方式

运行npm i webpack -g全局安装webpack，这样就能在全局使用webpack的命令

在项目根目录中运行npm i webpack --save-dev安装到项目依赖中

2.初步使用webpack打包构建列表隔行变色案例

项目结构:

运行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:

Title

• 这是第1个li
• 这是第2个li
• 这是第3个li
• 这是第4个li
• 这是第5个li
• 这是第6个li
• 这是第7个li
• 这是第8个li
• 这是第9个li
• 这是第10个li