学习地址:
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>
这时候,开开心心打开你的浏览器,发现没有报错,最终效果呈现: