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文件
<script src="../dist/bundle.js"></script>
效果如上
-
yarn下的包, 在js文件里, 用import语法导入
浏览器不支持import语法
-
webpack翻译打包后输出到bundle.js
-
html页面引入翻译打包后的js即可正常使用