<!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{这是第 $ 个 li}*9 -->
  <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>

html.js 中的内容：

import $ from 'jquery'

$(function(){
  $('li:odd').css('background-color','red');
  $('li:even').css('background-color','pink');
})

2、在项目中安装 webpack

在终端运行如下的命令，安装 webpack 相关的两个包：

npm install webpack@5.42.1 webpack-cli@4.9.0 -D

3、在项目中配置 webpack

（1）在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件，并初始化如下的基本配置：

module.exports = {
  mode: 'development'
}

（2）在 package.json 的 scripts 节点下，新增 dev脚本：

"scripts": {
    "dev": "webpack"
}

（3）在终端中运行 npm run dev 命令，启动 webpack 进行项目的打包构建

注意：mode 的可选值：

4、修改 index.html 中 script 的属性 src 路径

此时项目可运行，js 已被调用，颜色发生变化

二、webpack 中的默认约定

三、自定义打包的入口与出口

在 webpack.config.js 配置文件中，通过 entry 节点指定打包的入口，通过 output 节点指定打包的出口。

const path = require('path')   // 导入 node.js 中专门操作路径的模块

module.exports = {
  mode: 'development',
  // 开发时用development
  // 发布时用production
  entry: path.join(__dirname, './src/index.js'),
  output: {
    path: path.join(__dirname, './dist'),
    filename: 'bundle.js'
  }
}

// entry 要处理哪个文件
    // path 打包入口文件的路径 是node里面的一个模块，所以需要导入path才能用
    // .join 是node里面的拼接的方法
    // path.join() 这里的两个参数，第一个是参照路径，第二个是拼接的相对路径
    // __dirname 表示一个参照路径，参照当前配置文件（webpack.config.js）

// output 生成的文件要存放在哪里
    // output 是一个对象
    // path 输出文件前存放的路径
    // filename 生成的文件名