这篇文章主要是为了我自己的考试准备。 如果能帮到你就更好了。
理念：一种基于模块化、组件化、标准化、自动化的后端项目开发方法。
3、标准化：目录结构定义、编码标准化、接口标准化、文档标准化、GIT分支管理
企业中的项目都是基于工程方法开发的，所以了解webpack是很有必要的
它可以用来解决：代码压缩和混淆、处理浏览器兼容性问题、以模块化的方式处理项目中的资源。
在配置webpack之前，我们需要安装很多包。 我先把它们全部放在这里：
只需复制并粘贴它们即可。 先别担心它们的用途，稍后我会讨论它们。
注意，在安装包之前，一定要记得初始化：npm init。 初始化后，会生成package.json文件。
package.json 文件：
然后执行命令 npm i package name （安装下面所有的包）并等待安装完成（安装时间会花很短的时间）
webpack@5.58.2 webpack-cli clean-webpack-plugin@4.0.0 webpack-dev-server@4.3.1 html-webpack-plugin@5.3.2 style-loader@3.3.0 css-loader@6.4.0 less -loader@10.1.0 less@4.1.2 url-loader@4.1.1 file-loader@6.2.0 babel-loader@8.2.2 @babel/core@7.15.8 @babel/plugin-proposal-decorators@7.15 .8-D
步：
4.在public目录下创建index.html并引入index.js
5.创建十里标签
6.通过ES6模块化的方式导出jQuery，实现列表交替行改变颜色的效果。
1、在项目根目录下，新建src源码目录 2、在项目根目录下，新建公共静态资源目录
3.src目录下创建index.js 4.public目录下创建index.html，引入index.js
5.创建十里标签
此时li标签的作用是：
6.通过ES6模块化的方式导出jQuery，实现列表交替行改变颜色的效果。
这是为了实现index.js中的效果。 这时候你还需要安装一个包jquery。
执行命令：npm i jquery
如果你对jquery代码不是很熟悉，我建议你去w3c看看。 这并不难。 这里我也给大家提供w3c离线文档。
w3c 离线文档
关联：
提取码：xqy9
输入w3c，直接搜索jquery。 具体怎么学我就不教你了。
回到主题
这样index.html的代码就可以执行了，但是会报错。
- 浏览器对ES6+高级句型支持不太好webpack打包启动，但有兼容性。
解决方案：
项目中需要降级webpack中的JS代码模型
步：
1.安装两个相关包：webpack@5.58.2和webpack-cli（这一步不需要做，之前已经安装过了）
2、在项目根目录下（我的根目录是webpack-CSDN），创建一个名为webpack.config.js的webpack配置文件，然后配置如下：
3、在package.json文件的scripts节点下添加dev脚本，如下：
这样做的目的是为了简化执行过程中的操作。 虽然dev替换了G:webpack-CSDNnode_moduleswebpacklibindex.js路径，但是你可以根据这个路径自行查找。 现在只需要执行命令 npm run dev 就可以直接执行前面那串路径的内容了。
4、在终端执行npm run dev命令启动webpack打包构建项目。
包创建完成后，会生成一个dist文件。
经过webpack的一系列处理后，index.js和jquery.js会生成一个dist文件和main.js。
然后将index.html中引入的index.js改为main.js
如果再次执行index.html，则不会报错，结果为：
还没完，这只是一小部分。
也就是刚刚创建的webpack.config.js文件
-发展
-开发环境
-生产
-生产环境
-打包速度快，适合项目发布阶段使用
好吧，为什么我们的1、2、3、4这四个步骤中安装的目录和文件应该是src、public、index.js、index.html。
1、默认打包入口文件为src ->index.js
2.默认输出文件路径为dist -> main.js
这样你就明白为什么了，既然是默认的，那么我们可以改变它的入口和出口
修改包装入口和出口：
通过webpack.config.js文件中的入口节点指定打包入口和出口：
直接更改黄色框的内容即可。 请记住，更改后，index.html导入的.js文件也必须进行相应更改，否则会报错。
我们在上面开始时安装了很多软件包。 webpack@5.58.2 webpack-cli 这两个包是我们的webpack，其他的都是辅助的webpack，让它更加强大。
说到这里，我们就来说说webpack插件。
Webpack插件功能：
通过安装和配置第三方插件，可以扩展webpack的功能，使webpack使用起来更加方便。
三个常用插件：
1.clean-webpack-插件：
它的作用是每次打包的时候手动清空dist目录。导出的文件可以自己改，然后执行命令npm run dev再改几个。 当你查看dist文件时，它仍然会记录你刚刚制作的所有导出文件。 有了这个插件，它会帮你手动清除原来的导出文件。 ，只会留下您刚刚创建的导出文件。
我整理一下给大家看看：
查看dist文件：你会看到刚才创建的导出文件和之前的文件都被保留了。 其实原来的导出文件是不需要的，需要删除。 不然你为什么要更新呢？ 如果不清除的话，情况会变得更糟。 越来越多，要找到也很麻烦。
然后我们来配置一下：
降低 webpack.config.js 中的配置：
如果你再次执行 npm run dev ，dist 文件将会被手动清除。
这个插件的功能就像nodeon全局模块。 大家应该都用过。 简单来说，每次你更改代码时，它都会手动抓取 = 并为你更新页面。 您不需要自动更新页面。 这个插件的功能是一样的。 它会为您手动打包和构建它。 不需要每次都改代码然后执行命令nom run dev。
步：
1.安装包webpack-dev-server@4.3.1（之前已经安装过）
2、配置：
2.1 修改package.json中node脚本中的dev，如下：注意是serve，不是server。
2.2 在webpack.config.js配置文件中添加devServe节点：
好的，再次执行npm run dev命令，重新打包项目。
但神奇的事情又发生了，报错了。
如果你再次查看你的dist文件，里面所有的js文件都消失了。 不再有入口文件了。 那么肯定会报错。 那么这个 .js 文件在哪里呢？ 事实上，它是保存在显存中的。 大家都知道，从显存中提取数据是非常快的。 有朋友问，为什么我看不到呢？ 读不懂也很正常。 记忆是存在的。 但是看不到。那么如何访问显存中的入口文件呢？
可以直接用/代表工程根目录，后面加上需要访问的文件名，来访问显存中的文件。
例如：/bundle.js 表示要访问的webpack-dev-server生成的bundle文件是在显存中生成的。
所以在index.html文件中引入/bundle.js
请注意，您的自定义导出文件也必须更改为bundle.js
再次执行npm run dev，就不会报错了。
3.html-webpack-插件：
这个插件的作用就是帮助我们手动导入导出的文件。 我们不再需要手动导入它们。
步：
1.安装包：html-webpack-plugin（我们之前已经安装过了）
2、配置：
- 在webpack.config.js配置文件中配置html-webpack-plugin，如下：
这时可以直接注释掉index.html引入的.js。
别着急，下面还有更多的内容，我不想讲那么多，但是确实没有其他办法了。 我打字的手很累，我无能为力。 来吧，一切都在这里。
下一步是处理 css 文件。
需要使用loader来处理。
为什么？
- 实际开发中，webpack默认只能打包处理以.js后缀结尾的模块。
- 其他以 webpack 结尾的非 js 模块后缀名默认无法处理。
- 需要正常调用loader来打包非js文件，否则会报错
因此，loader的作用就是辅助webpack对具体的文件模块进行打包和处理。 例如：
-css-loader 可以打包处理.css相关文件
-less-loader 可以打包处理.less相关文件
-babel-loader 可以打包处理 webpack 难以处理的中间 JS 句型
添加css来处理网页
简单来说就是把li标签后面的那一点处理一下，然后将css文件引入到index.js中
这时候如果再执行npm run dev看看，会发现报如下错误；
我们需要使用loader来处理文件
打包并处理css文件：
步：
1.安装包：style-loader@3.3.0和css.loader@6.4.0（之前已经安装过）
2、配置：
在webpack.config.js配置文件中的module->rules数组中添加loader，如下：
注意：
- 多个加载器的调用顺序为：从后到前。 上面是先调用css-loader，再调用style-loader。
然后执行npm run dev就不会报错了。
打包并处理较少的文件：
添加更少的内容来处理网页
简单来说就是设置外行距和内行距，以及列宽。
记得在index.html中引入less文件
这时候执行命令npm run dev就会报错。 错误与之前相同。 您需要添加一个加载程序来处理该文件。
现在让我们处理 less 文件：
步：
1、安装包：less-loader@10.1.0和less@4.1。 （之前已经安装过）
2、配置：
在webpack.config.js配置文件的modele->rules列表中添加loader，如下：
然后执行npm run dev就不会报错了。
url路径相关文件的打包处理：
首先在index.html中添加div包
目的是设置包的背景照片
引入一张照片并在index.js中设置
此时执行npm run dev会报错。 错误是：
其实这是一个路径的问题。
加工步骤：
1、安装包：url-loader@4.1.1和file-loader@6.2.0（之前已经安装过）
2、配置：
在webpack.config.js配置文件的module->rules列表中添加loader，如下：
然后执行npm run dev就不会报错了。
如果照片没有出现在您的页面上，请不要惊慌，这是因为 div bag 的高度没有设置。
只需设置一下即可
坚持很快就会结束
打包处理JS文件的中间句型：
webpack 只能打包处理一些中间的 JavaScript 句型。 对于那些太中间的，webpack 无法处理它们。 需要使用babel-loader进行打包。
好吧，我们先写一些中间代码，放进去。当然，我不懂这个中间句型的意思，所以就照搬了。
你会发现，当你写这行代码时，立刻就会报错，因为太中间了，软件处理不了。
好吧webpack打包启动，我们来解决它。
步：
1.安装包：babel-loader相关包babel-loader@8.2.2和@babel/core@7.15.8和@babel/plugin-proposal-decorators@7.15.8（之前已经安装）
2、配置：
2.1 在webpack.config.js的module->rules列表中添加loader，如下：
2.2. 在项目根目录下创建babel.config.js配置文件，定义babel配置如下：
然后执行npm run dev就不会报错了。
会帮你直接执行你刚刚输入的中间代码
包发布：
上面我们已经基本配置好了webpack。 现在我们想将我们的项目发送给用户。 我们应该做什么？
配置webpack打包发布：
在package.json文件的scripts节点下添加bulid命令，如下：
这个操作的作用是：执行命令npm run build会帮助你切换到生产模式。 执行命令 npm run dev 将执行开发环境的命令。 无需自动来回更改。
执行命令 npm run build 并进入 dist 目录。 该目录中还会有更多文件。
让我告诉你dist目录中的文件名来自哪里。
首先，images文件来自于我们刚刚配置的url-loader，即将处理后的照片输出为images。
您还可以将后缀为 .js 的文件放在一起。 你只需要执行以下步骤。只需将 js/ 添加到输出文件中
处理完成后，再次执行npm run build看一下，我已经给你打包好了
好吧，让我们结束一件事。
现在还有一个问题是，在开发环境中，如果我们写的代码不正确，报错，你会发现错误提示的行号和代码错误的行号不一致，这样就减少了处理的时间我们更改代码。 困难。
那么我们就来谈谈这个问题。 解决这个问题的方法是使用source map
源地图是存储位置信息的信息文件。 它将帮助我们准确定位错误。
大家看好，我故意把中间句型最后一行代码写错了。 我在console.log中少写了一个g，所以肯定会报错。 现在我们看一下浏览器向我们报告的错误。
执行命令 npm run dev 可以看到错误
错误：
它提示的错误在index.js的第34行第9行。 然后你可以回去看看你自己的index.js有没有。 你不必看，它只是不在那里。 所以这减少了代码维护。
那么让我们来解决它吧。
配置：
1、开发环境中，在webpack.config.js中添加以下配置：
现在执行命令 npm run dev 可以看到错误信息：
你看，此时提示的错误信息是在正确的位置。
如果你着急的话，我再说一点。 如果你点击蓝色的错误框看一下，你会发现它会手动运行到你的代码中来获取错误显示的位置。 如果你是一名开发者，你愿意让用户听到你的源代码吗？ 当然不。 所以必须要处理。
您只需要进行以下配置：
这时候如果你执行命令 npm run dev /npm run build，然后点击错误信息，它不会运行到你的源码，而是显示错误信息，很好的保护了源码。
好了，以上就是webpack的全部配置了。
但我想说的是，其实我们在开发时不需要自动配置显示，一键生成即可。
我也说一下如何进行手动配置。重建并新建一个文件夹来做
首先你需要添加一个包@vue/cli
执行 npm i -g @vue/cli 进行全局安装
安装完成后，直接执行命令vue create demo。 demo是我直接创建的名字。 您也可以创建一个您喜欢的。 然后按 Enter 后，系统会要求我们选择一个版本。 我直接选择vue2，用鼠标上下键选择，然后回车手动配置。 你需要做的就是等待（需要很长时间，我选择了中间的等待..）
这时候他就会帮我们手动配置一下。 事实上，它的手动配置是基于我们前面提到的步骤。
下载完成：
他会提示有两个命令，cd demo 和 npm runserve
你会发现你的文件夹里多了很多东西，就像刚才自动配置的一样。
cd demo 命令可帮助您进入演示文件。
执行 npm runserve 将帮助您打开开发环境。
然后你可以直接打开它的网页并看到该项目。
如果想要生产环境，执行命令 npm run build
现在让我们执行这个命令：
此时文件中会生成dist目录，其中包含很多文件。
但是当我们执行index.html时，就会报错
错误原因是路径问题。 这时候我们就需要自己自动配置一下，在根目录下创建一个路径。
vue.config.js配置文件配置如下：
此时再执行就不会报错了。
这时候，你可以直接打开项目，直接进入项目文件。 您不需要像现在一样执行该命令。 您只需双击index.html即可直接打开它。
