这是我参与「第五届青训营 」伴学笔记创作活动的第 15 天 。

webpack 的基本使用

1.什么是webpack？ webpack 是前端项目工程化的具体解决方案。

它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性 能优化等强大的功能。

让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。

目前企业级的前端项目开发中，绝大多数的项目都是基于 webpack 进行打包构建的。 2.webpack快速入门 案例需求 编写一个列表隔行变色的Demo

代码实现 （1）新建项目，并进行初始化 新建项目空白目录，并运行 npm init –y 命令，初始化包管理配置文件 package.json npm init -y （2）新建 src目录，并创建所需要的文件 新建 src 源代码目录，新建 src -> index.html 首页和 src -> index.js 脚本文件，初始化首页基本的结构。 `

Document

• 这是第1个li
• 这是第2个li
• 这是第3个li
• 这是第4个li
• 这是第5个li
• 这是第6个li
• 这是第7个li
• 这是第8个li
• 这是第9个li

` （3）运行 npm install jquery –S 命令，安装 `npm i jquery -S` 4）通过 ES6 模块化的方式导入 jQuery，实现列表隔行变色效果 `// 1.使用ES6模块化语法导入 jquery import $ from 'jquery'

// 2.实现隔行变色 (function() { ('li:odd').css('backgroundColor','red') $('li:even').css('backgroundColor','cyan') })` 并在index.js中引用

<script src="./index.js"></script>

3.安装 webpack（解决上文BUG） npm install webpack@5.5.1 webpack-cli@4.2.0 -D 4.在项目中配置webpack

webpack 中的默认约定 默认的打包入口文件为 src -> index.js

默认的输出文件路径为 dist -> main.js

也就是说，尽管我们没有在项目中显示的配置，webpack默认都会将src目录下的文件打包，在dist目录下输入