Node-webpack基本使用和详细案例

webpack基本概念

webpack ：是前端项目工程化的具体解决方案。目前绝大部分的 Vue/React 等前端项目，都是基于 webpack 进行工程化开发的。

webpack基本使用

① 新建项目空白目录，并运行 npm init –y 命令，初始化包管理配置文件 package.json
② 新建 src 源代码目录和 public 静态资源目录
③ 新建 public -> index.html 首页和 src -> index.js 脚本文件
④ 初始化首页基本的结构
⑤ 运行 npm install jquery –S 命令，安装 jQuery
⑥ 通过 ES6 模块化的方式导入 jQuery，实现页面效果
⑦安装：
在终端运行如下的命令，安装 webpack 相关的两个包：
npm install webpack@5.58.2 webpack-cli@4.9.0 --save-dev
⑧配置：

在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件，并初始化如下的基本配置：
在 package.json 的 scripts 节点下，新增 dev 脚本如下：

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

案例：

给偶数< li>添加背景颜色红色
① 新建项目空白目录，并运行 npm init –y 命令，初始化包管理配置文件 package.json

② 新建 src 源代码目录和 public 静态资源目录
③ 新建 public -> 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></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>

⑤ 运行 npm install jquery –S 命令，安装 jQuery

⑥ 通过 ES6 模块化的方式导入 jQuery，实现页面效果

结果：

我们发现页面效果没有展示出来，这是因为ES6模块化语法有兼容性问题，所以要使用webpack对有兼容性的代码进行降级处理

⑦安装：
在终端运行如下的命令，安装 webpack 相关的两个包：
npm install webpack@5.58.2 webpack-cli@4.9.0 --save-dev

⑧配置：

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

webpack.config.js 是 webpack 的配置文件，告诉 webpack 怎么对项目进行打包

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

★★★★mode的引用值有两个
1.development：适合开发环境，因为打包速度快
2.production：适合生产环境，因为打包体积小

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

要把index.html中的script加载改成webpack打包的js

结果：

打包的入口与出口

默认：

在 webpack 4.x 和 5.x 的版本中，有如下的默认约定：
① 默认的打包入口文件为 src -> index.js
② 默认的输出文件路径为 dist -> main.js

自定义：

通过 entry 节点指定打包的入口。通过 output 节点指定打包的出口。