学习地址：
b站黑马前端vue教程
官网链接：webpack官网
目录
1、什么是webpack？
概念：webpack是前端项目工程化的具体解决方案。
主要功能：提供了友好的前端模块化开发支持，以及代码压缩混淆（减小体积）、处理浏览器端JavaScript的兼容性（将高级的代码转换成低级的没有兼容问题的代码，有对应不同版本的解决方案）、性能优化等强大的功能。
优点：让程序员把工作的重心放在具体功能的实现上，提高了前端开发效率和项目的可维护性。
注意：目前Vue, React等前端项目，基本上都是基于webpack进行工程化开发的。
2、webpack小示例——列表隔行变色效果
按照以下步骤执行
index.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="index.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>index.js文件内容如下：
import $ from "jquery";//使用es6语法导入jQuery
$(function () {
//实现隔行变色效果
$("li:odd").css("background-color", 'red')
$("li:even").css("background-color", "pink")
})这时候打开浏览器，却发现报错，并且效果没有实现
报错原因：浏览器不识别es6导入语法
此时我们就可以使用webpack来解决
3、在项目中安装webpack
在终端运行如下的命令，安装 webpack 相关的两个包：
npm install webpack@5.42.1 webpack-cli@4.7.2 -D
4、在项目中进行配置
① 在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件，并初始化如下的基本配置：
// 使用node.js中的导出语法，向外导出一个webpack的配置对象
module.exports = {
// 代表webpack的运行模式，可选值有两个development（开发使用，打包快，体积大）和production（上线使用，打包慢，体积小）
mode: 'development'
}② 在 package.json 的 scripts 节点下，新增 dev 脚本如下：
"scripts": {
//其中"dev"名字可自取，只要是字符串就可以，相对应的，在终端执行输入命令的时候也要保持一致
"dev": "webpack";
},③ 在终端中运行 npm run dev 命令，启动 webpack 进行项目的打包构建
完成之后，根目录会多一个dist文件夹，生成的资源 main.js 默认放在dist目录下
接下来，我们需要在index.html中引入main.js
<!-- <script src="index.js"></script> -->
<script src="../dist/main.js"></script>这时候，开开心心打开你的浏览器，发现没有报错，最终效果呈现：
611
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
