webpack---实现列表隔行变色案例
一、介绍
本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。
简要概述一下webpack是前端工程化的具体解决方案，它主要提供了有好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端JavaScript的兼容性、性能优化等强大的功能。
现在我们举一个webpack打包的小案例，实现列表隔行变色。
效果如下图：
二、案例实现
1、创建项目
新建项目空文件目录（纯英文），并运行npm init -y, 得到一个初始化包管理配置文件。
新建src文件夹，并在里面创建index.html index.js
1.
运行 npm install jquery -S ，安装jquery
通过ES6模块化的方式导入jQuery，并实现隔行变色。
HTML部分
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><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></html>
js部分
import $ from 'jquery'$(function() {$("li:odd").css("background-color", 'green');$("li:even").css("background-color", "skyblue");})
这时候运行是不会出现效果的，我们需要借助webpack打包并规范js文件。
2、安装配置webpack
- 在根目录输入 npm install webpack webpack-cli -D
- 在根目录创建并配置webpack.config.js
还有entry，output等参数自行了解
- 更改package.json配置如下
test可以删除
- 在终端运行npm run dev
可以看到生成了一个打包文件
这时候我们更改script的引入，改为main.js
三、运行效果
看看运行效果
很不错呢，我们已经学会了webpack的基本打包使用方法。
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://blog.csdn.net/qq_46186155/article/details/120518463
内容来源于网络，如有侵权，请联系作者删除！