[案例]webpack的打包和使用（新手入门）

一、初始化管理配置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保存，实时效果就有了。