![](https://i-blog.csdnimg.cn/blog_migrate/d0265bffbb69d3d9a605a16e1e73a058.png)
具体步骤为:
新建空白文件夹,用Code打开该文件夹,打开Code终端输入 npm init -y,生成package.json文件;
在空白文件夹里面新建文件夹src,在src里面创建index.html和index.js文件;
打开终端运行npm install jquery -S,生成node_modules文件夹;
打开终端运行npm install webpack -D,安装webpack;
在根目录中创建webpack.config.js文件;
打开终端打包项目npm run dev,生成dist文件夹(含main.js),运行游览器。
展示奇数行和偶数行不同颜色例子:
index.html文件:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../dist/main.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>
</ul>
</body>
index.js文件:
import $ from 'jquery'
$(function(){
$('li:odd').css('background-color','red')
$('li:even').css('background-color','yellow')
})
package.json文件scripts节点下:
"scripts": {
"dev": "webpack"
},
webpack.config.js文件:
module.exports = {
//分development(开发)和production(上线)
mode:'development'
}
按照上面具体步骤协同文件内容,最后运行-启动调式(此次项目采用谷歌游览器)
![](https://i-blog.csdnimg.cn/blog_migrate/bf6773a9d4497a11d0f8fad722ac12ab.png)