1.什么是webpack?
概念：webpack是前端项目工程化的具体解决方案
主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端JavaScript的兼容性（根据配置，来兼容不同的浏览器版本）、性能优化等强大的功能
好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。
注意：目前Vue,React等前端项目，基本上都是基于webpack 进行工程化开发的
2.创建列表隔行变色项目
- 创建项目空白目录，并运行 npm init -y 命令，初始化包管理配置文件 package.json
- 新建scr源代码目录
- 新建src -> index.html 首页和 src -> index.js 脚本文件
- 初始化首页基本的结构
<!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>
//1.使用ES6导入语法，导入JQuery import $ from 'jquery' //2.定义jQuery的入口函数 $(function () { //3.实现奇偶行变色 //奇数行为红色 $('li:odd').css('background-color','red') $('li:even').css('background-color','pink') }) - 运行 npm install jquery -S 命令(全写方式： npm install jquery --save，安装jQuery
- 通过 ES6-模块化方式导入jQuery，实现列表隔行变色效果
3.在项目中安装webpack， 解决import $ from 'jquery'兼容性问题
在终端运行如下命令，安装webpack相关的两个包：
npm install webpack@5.42.1 webpack-cli@ -D
-D 的意思是把下边两个包装到，package.json中 devDependencies目录下，是--save-dev的缩写
4.在项目中配置webpack
- 在项目跟目录中，创建名为webpack.config.js的webpack配置文件，并初始化如下的基本配置：
//使用 node.js中的导出语法，向外导出一个 webpack的配置对象 module.exports = { //代表 webpack 运行的模式，可选值有两个 development和production mode:'production' }
- 在package.json中配置启动脚本
"scripts": { "dev":"webpack" // script节点下的脚本，可以通过npm执行，例如npm run dev }
- mode的可选值 ，mode的可选值有两个，分别是
- development
- 开发环境
- 不会对打包生成的文件进行代码压缩和性能压缩
- 打包速度快，适合在开发阶段使用
- production
- 生产环境
- 会对打包生成的文件进行代码压缩和性能优化
- 打包速度很慢，仅适合在项目发布阶段使用
- webpack.config.js是webpack的配置文件
- webpack在真正开始打包构建之前，会先读取这个配置文件，从而基于给定的配置，对项目进行打包。
- 注意：由于webpack是基于node.js开发处理的打包工具，因此在他的配置文件中，支持使用node.js相关的语法和模块进行webpack的个性化配置
- webpac的默认约定
- 在webpack4.X和5.X的版本中，有如下的默认约定
- 在默认的打包入口文件为src ->index.js
- 默认的输出文件路径为dist->main.js
- 注意：可以在webpack.config.js中修改打包的默认约定
- 在webpack4.X和5.X的版本中，有如下的默认约定
- 自定义打包的入口与出口
- 在webpack.config.js配置文件中，通过entry节点指定打包的入口。通过output节点指定打包的出口，示例代码如下：
const path = require('path') //导入node.js 中专门操作路径的模块 module.exports = { entry：path.join(__dirname,'./src/index.js'),//打包入口文件的路径 output:{ path:path.join(__dirname,'./dist'),//输出文件的存放路径 filename:'bundle.js' } }
- 在webpack.config.js配置文件中，通过entry节点指定打包的入口。通过output节点指定打包的出口，示例代码如下：
- 1