创建列表隔行变色项目
① 新建项目空白目录，并运行 npm init –y 命令，初始化包管理配置文件 package.json
② 新建 src 源代码目录
③ 新建 src -> index.html 首页和 src -> index.js 脚本文件
④ 初始化首页基本的结构
⑤ 运行 npm install jquery –S 命令，安装 jQuery
⑥ 通过 ES6 模块化的方式导入 jQuery，实现列表隔行变色效果
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="../dist/main.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
//使用 es6 导入语法，导入 jquery
import $ from 'jquery'
//定义 jQuery 的入口函数
$(function() {
//实奇偶行变色
$('li:odd').css('background-color','red')
$('li:even').css('background-color','pink')
})
在项目中安装 webpack
在终端运行如下的命令，安装 webpack 相关的两个包：
npm install webpack webpack-cli -D
在项目中配置 webpack
① 在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件，并初始化如下的基本配置：
module.exports = {
//mode 用来指定构建模式。可选值有 development(开发模式) 和 production（上线模式）
//开发的时候用development打包速度快，上线的时候用production体积小加载快
mode:'development'
}
mode 的可选值
mode 节点的可选值有两个，分别是：
-
development
-
开发环境
-
不会对打包生成的文件进行代码压缩和性能优化
-
打包速度快，适合在开发阶段使用
-
-
production
-
生产环境
-
会对打包生成的文件进行代码压缩和性能优化
-
打包速度很慢，仅适合在项目发布阶段使用
-
② 在 package.json 的 scripts 节点下，新增 dev 脚本如下：
"scripts": {
"dev": "webpack"
}
③ 在终端中运行 npm run dev 命令，启动 webpack 进行项目的打包构建
PS D:\桌面\webpack> npm run dev
> webpack@1.0.0 dev
> webpack
asset main.js 329 KiB [emitted] (name: main)
runtime modules 937 bytes 4 modules
cacheable modules 287 KiB
./src/index.js 242 bytes [built] [code generated]
./node_modules/jquery/dist/jquery.js 287 KiB [built] [code generated]
webpack 5.75.0 compiled successfully in 172 ms
PS D:\桌面\webpack>
webpack.config.js 文件的作用
webpack.config.js 是 webpack 的配置文件。webpack 在真正开始打包构建之前，会先读取这个配置文件，从而基于给定的配置，对项目进行打包。
注意：由于 webpack 是基于 node.js 开发出来的打包工具，因此在它的配置文件中，支持使用 node.js 相关的语法和模块进行 webpack 的个性化配置。
webpack 中的默认约定
在 webpack 4.x 和 5.x 的版本中，有如下的默认约定：
① 默认的打包入口文件为 src -> index.js
② 默认的输出文件路径为 dist -> main.js
注意：可以在 webpack.config.js 中修改打包的默认约定
自定义打包的入口与出口
在 webpack.config.js 配置文件中，通过 entry 节点指定打包的入口。通过 output 节点指定打包的出口。
示例代码如下：
