Day8_JS中WebPack打包

用案例去实现webpack打包，实现奇偶数的li背景颜色区分。我们使用jQuery去实现！

我们通常情况下导入jQuery的包会使用script导入，今天我们用node控制台方式去导入。需要提前下载好node.js并且配置环境变量。https://nodejs.org/zh-cn/download/官网下载地址。注意下载完毕后配置系统环境变量。

首先新建一个文件包，使用code打开终端运行npm init -y 此时项目会生成一个package.json文件        如图所示

 接着就是初始化项目，一般都会新建一个src目录，我们在src目录里面新建index.html和index.js文件，新建完毕后就可以通过npm导入jQuery了，放在平时我们导入jquery都是通过<script></script>去引入文件，现在我们只需要通过npm i jquery -S就可以了。

运行成功后会在package.json中多出应用的jquery文件。这里的npm i jquery -S等同于npm install jquery --save并且包是放在正式环境下，不在dev环境下。

接着在index.html中快速生成9个li标签  使用 ul>li{这是第$个li}*9快速生成html代码，接着我们就使用jquery去实现。

这个时候我们去使用jquery去编写它的效果展示，奇数偶数的li标签背景颜色不一样，我们先实现一下代码。

 上面的图片，正常情况下我们要在也买你中使用就需要，使用下面的导入方式，因为我们今天使用的是webpack包管理，所以下面的导入方式就变成了集中管理，需要使用cli去打包，但我个人觉得实际开发中不推荐，但是开发上线后这是个必要的操作，必须去会webpack去打包项目，压缩项目。下面我会具体介绍安装和配置webpack。显然我们这个时候的写的jquery代码并没有被实际应用到。

 

 接下来重点来了！！！

我们需要在项目中安装webpack，我们只需要执行npm i webpack@5.42.1 webpack-cli@4.7.2  -D

 运行成功后，会多出node-modules文件夹和package-locks.json文件，此时package.json会多出几行代码。代表在dev环境下安装成功。但是要注意我们以后如果发布程序的话，dev下的包是失效的，必须放在正式的dependencies正式环境下。还要注意上面npm执行代码的后面-D是简写，全部名称叫做--save-dev，和上面的-S不一样，-S是正式环境-D是开发环境。不过我们不加的话，默认是正式环境的，这点需要了解。

 接着在项目主目录下面创建webpack的配置文件，webpack.config.js文件，并且在里面添加mode也就是初始化项目信息。通常情况就是有两种mode选择，开发环境和正式环境，两者不同点在于，开发环境不会去压缩代码。

 这时候我们还得去package.json里面去配置运行的文件，把webpack配置到项目文件中

 上面的dev是key可以自己随意的修改，我们后续就可以使用 npm run dev 去运行项目。

运行成功后会多出一个dist的文件夹，它下面就是我们这个项目所有文件全部集成到一个js文件中了，所有这个时候我们只需要在页面中导入dist下面的js文件就可以执行jquery代码了。 

 

 具体效果就是上面所示。

总结：这只是一个执行webpack打包的很小的一个demo，其中内容肯定远远不止这些，还需要后面一步一步深究学习。后面强化这部分后就马上到vue的学习。