webpack 的基本使用

1、什么是 webpack

概念：webpack 是前端项目工程化的具体解决方案。

主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性
能优化等强大的功能。

好处：让程序员把工作的重心放到具体功能的实现上，提高了前端开发效率和项目的可维护性。

注意：目前 Vue，React 等前端项目，基本上都是基于 webpack 进行工程化开发的

2、创建列表隔行变色项目

npm执行需要按照node.js

1. 新建项目空白目录，并运行 npm init –y 命令，初始化包管理配置文件 package.json
   
2. 新建 src 源代码目录
3. 新建 src -> index.html 首页和 src -> index.js 脚本文件
4. 初始化首页基本的结构
   
5. 运行 npm install jquery –S 命令，安装 jQuery
   
6. 通过 ES6 模块化的方式导入 jQuery，实现列表隔行变色效果
   

3、在项目中安装 webpack

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

4、 在项目中配置 webpack

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

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

4.1 mode 的可选值

mode 节点的可选值有两个，分别是：

1. development

开发环境
不会对打包生成的文件进行代码压缩和性能优化
打包速度快，适合在开发阶段使用

1. production

生产环境
会对打包生成的文件进行代码压缩和性能优化
打包速度很慢，仅适合在项目发布阶段使用

4.2 webpack 中的默认约定

在 webpack 4.x 和 5.x 的版本中，有如下的默认约定：

1. 默认的打包入口文件为 src -> index.js
2. 默认的输出文件路径为 dist -> main.js

注意：可以在 webpack.config.js 中修改打包的默认约定