用案例去实现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的学习。