webpack扩展_隔行变色

最新推荐文章于 2022-05-22 17:07:35 发布

老李头的代码生活

最新推荐文章于 2022-05-22 17:07:35 发布

阅读量86

点赞数 1

分类专栏： Npm JavaScript 文章标签： jquery javascript

本文链接：https://blog.csdn.net/laoli360/article/details/120421108

版权

JavaScript 同时被 2 个专栏收录

19 篇文章 1 订阅

订阅专栏

Npm

9 篇文章 0 订阅

订阅专栏

webpack-案例-隔行变色

回顾从0准备环境
- 初始化包环境
- 下载依赖包
- 配置自定义打包命令
下载jquery

yarn add jquery

3. 新建public/index.html - 前端首页

4. 新建src/main.js - webpack打包入口

index.html内容如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

<div id="app">
  <!-- ul>li{我是第$个li}*10 -->
  <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>
  </ul>
</div>

</body>
</html>

在src/main.js引入jquery

import $ from 'jquery'

main.js内填写

$(function() {
  $('#app li:nth-child(odd)').css('color', 'red')
  $('#app li:nth-child(even)').css('color', 'green')
})

引用jQuery 让li隔行变色

执行打包命令

yarn build

把public/index.html手动复制到dist下

然后引入打包后的bundle.js文件

效果如上

yarn下的包, 在js文件里, 用import语法导入

浏览器不支持import语法
webpack翻译打包后输出到bundle.js
html页面引入翻译打包后的js即可正常使用

老李头的代码生活

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
webpack扩展_隔行变色

webpack-案例-隔行变色回顾从0准备环境初始化包环境下载依赖包配置自定义打包命令下载jquery yarn add jquery3. 新建public/index.html - 前端首页4. 新建src/main.js - webpack打包入口index.html内容如下<!DOCTYPE html><html lang="en"><head>..
复制链接

扫一扫