一、初始化管理配置package.json
1、创建一个纯英文名称的空白文件夹(注:中文文件夹运行npm init -y会报错)
2、然后点击进入文件夹,通过地址栏输入cmd回车或shift+鼠标右键可出现一个PowerShell即可打开终端,在终端输入npm initi -y命令回车运行。此时,你会发现文件夹多了一个package.json,到此我们的初始化配置就完成了!
二、新建src源代码目录并初始化首页结构
1、在webpack文件夹内在创建一个以src命名的文件夹
2、然后将webpack文件夹拖到vscode,并在src文件夹下创建index.html文件和index.js文件
3、在html文件写入以下内容
三、安装jquery
1、打开终端,输入npm install jquery -S命令回车运行安装jquery
这个时候你会发现webpack多了几个文件,其中node_modules下有了下载好的jquery文件
2、打开src里面的index.js文件,并输入以下内容
并将index.js文件引入到html中
而此时保存运行我们会发现并没有出现我们想要的效果,反而报错了,以下内容提示我们是语法错误,原因是我们index.js文件导入es6的语法太高级了,从而出现了兼容问题吗,浏览器无法解析。
要想解决以上问题,需要我们在项目中安装webpack
四、安装webpack
1、在终端输入npm install webpack@5.42.1 webpack-cli@4.7.2 -D回车运行
下载结束我们返回vscode并打开package.json会发现第一个是我们安装jquery记录的,下面是我们安装webpack记录的
你以为安装好就可以正常运行了吗?no,no,no,接下来就到了我们的配置环节了。
2、在项目根目录中,创建名为webpack.config.js的webpack配置文件
并在此文件中输入以下内容
3、打开package.json文件找到scripts,并将括号内容清空
更换为
4、在终端中运行npm run dev命令,启动webpack进行项目的打包构建
处理完后会生成dist文件,里面包含的main.js可以帮我们解决兼容性问题
而此时,需要我们把html文件中之前导入的index.js文件替换为main.js文件
这时候保存打开浏览器就出现了我们想要的效果了,控制台也不报错了
[番外]但是我们打开main.js文件会发现代码当中有很多注释,体积比较大,显然是未压缩的文件,要想进行压缩怎么办?
首先打开webpack.config.js文件将里面的development更换为production并保存就可以了
然后在终端输入npm run dev命令就能进行压缩了
和压缩前进行对比,我们会发现
体积压缩了近四倍,但是打包时间比之前要长了近五倍,并且此时打开main.js文件会发现,此文件已经被压缩了。
由此建议我们在开发过程中使用development,因为打包时间快,方便开发,产品上线的时候使用production。
五、webpack中的默认约定
在webpack 4.x和5.x版本中,默认的打包入口文件为src->index.js,默认的输出路径为dist->main.js(注:可以在webpack.config.js中修改打包的默认路径)。那么,我们想要更改路径该怎么办呢?那么,我们接着往下看
1、首先在webpack.config.js配置文件中,通过entry节点指定打包的入口,通过output节点指定打包的出口,里面引入的index1.js文件是通过src下index.js重新命名后的文件,代码如下:
然后输入npm run dev指令
但是我们此时也想将main.js也给换掉呢,那么同样在webpack.config.js文件添加如下操作就行啦!
输入完毕,打开终端,输入npm run dev,我们会发现bundle.js就有了
并且dist文件夹也存在了一个名为bundle.js的文件
并且此时在index.html文件中要从新引入一下
此时我们要检测一下是否成功,那么首先进入名为index1.js的文件,更改奇偶行颜色
保存运行后并未出现效果改变,此时别急~ 我们打开终端输入npm run dev指令就能得到变化了
虽然这个时候是实现了我们的效果,很开心,但是又一个问题出现了,我们总不能改变一次代码运行一次指令吧
那么,我们该怎么解决尼?莫慌,接下来有请我们的webpack闪亮登场[鼓掌]
六、安装webpack插件
1、终端运行npm install -D webpack-cli@4.9.0指令进行安装,出现爆红是由于版本太低导致,继续输入npm update webpack-cli指令更新到最新版本就能解决这一问题
2、安装完毕后打开webpack.json文件,在webpack后面添加
3、然后输入npm run dev 就能有bundle.js出现,然后终端光标持续闪烁实时监控状态变化,没有退出
4、更改index1.js文件里的样式并保存后,终端会持续输出以下内容
5、退出实时监控连续两次ctrl+c,即可退出,此时更改样式运行,样式并未改变,这个问题是因为页面的协议不一致导致
6、ctrl+c复制终端内http://localhost:8080/网址在浏览器打开,会出现以下内容,打开src文件夹里面的index发现样式还未改变
这是因为bundle.js在根目录,但是我们并未找到这个文件
但是我们可以通过在8080后面输入/bundle.js回车可以查看,为什么会有这个奇怪现象呢,是因为webpack插件并未把文件放到硬盘上,而是放到了虚拟内存上,所有我们看不到,但是可以访问到
7、然后我们要将html中的引入文件更换为内存中的地址(复制上图bundle.js浏览器网址)
8、此时,将vscode和html页面以及index1.js页面在同一页面打开,修改样式,ctrl+s保存,实时效果就有了。