安装webpack
首先新建空白项目（文件夹），在命令行中运行下面的命令，初始化包管理配置文件package.json
npm init -y
安装webpack（版本号非必须）
npm i webpack@5.98.0 webpack-cli@6.0.1 -D
-D (--save-dev)：用于将包添加到项目的 devDependencies，表示这是在开发阶段所需的依赖，例如测试工具、构建工具等。
webpack是开发阶段使用的工具，上线后不再使用，所以安装时，携带参数-D，表示装到开发依赖节点下。
安装时如果不携带版本号，默认安装最新版本。
创建webpack配置文件
在项目根目录中创建webpack的配置文件，名为webpack.config.js，在配置文件中可以声明一些webpack的基本配置项。
配置文件使用CommonJS的语法，通过module.export方式向外导出一个对象。
webpack在真正开始打包构建前，会先读取这个配置文件（导出的对象），从而基于给定的配置，对项目进行打包和构建。
注意：由于wenbpack是基于node.js开发出来的打包工具，因此在它的配置文件中，支持使用node.js相关的语法和模块进行webapck的个性化配置。
module.exports = {
//mode有两个节点可选，分别是 development 和 production
//development 表示开发环境，不会对打包的文件进行代码压缩和性能优化，打包速度更快，适合在开发阶段使用
//production 表示生产环境，会对打包的文件进行代码压缩和性能优化，打包速度很慢，仅适合在项目发布阶段使用
mode: 'development', //开发模式
//webpack默认约定：默认的打包入口文件为/src/index.js，默认的输出文件为/dist/main.js
//可通过下面的配置修改打包的默认约定
entry: path.join(__dirname, './src/index.js'), //打包入口文件路径
output: {
path: path.join(__dirname, './dist/'), //输出文件的存放路径
filename: 'build.js' //输出文件的名称
}
}
对比model两种模式打包生成文件的大小和所用时间
实现隔行变色效果（demo）
在根目录下新建src源代码目录，在其中新建 index.html 和 index.js 文件，初始化首页 index.html 内的HTML基本结构
安装jQuery，命令
npm install jquery -S
-S (--save)：用于将包添加到项目的 dependencies，表示这是在生产环境中运行时所需的依赖。
使用ES6模块化的方式导入jquery
import $ from 'jquery'
实现隔行变色的效果
$(function() {
$("li:odd").css("backgroundColor", "#eee") //奇数行
$("li:even").css("backgroundColor", "#fff") //偶数行
})
打开webpack的包管理配置文件package.json，设置可以通过 npm run ... 的方式运行脚本的命令：
在package.json文件中，找到 scripts 配置项，里面配置了可运行的脚本，前面key键任意取，表示脚本的名字，后面的value为固定值，表示运行脚本时执行的命令
比如：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack"
},
其中的dev，运行的命令为：
npm run dev
打包结束后，可以看到在项目根目录中多了一个dist文件夹，里面多一个main.js，这就是webpack打包生成的文件，
webpack-dev-server会监听源代码的变化
15601023311
