本文链接：https://blog.csdn.net/qq_48435896/article/details/126554533

webpack概念：

webpack 是前端项目工程化的具体解决方案。它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性能优化等强大的功能。

四个核心概念：

入口（entery）：起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的
输出(output):output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段，来配置这些处理过程
. 3.loader:loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。在 webpack 的配置中 loader 有两个目标：

在这里插入图片描述 test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件。 use 属性，表示进行转换时，应该使用哪个 loader

4.插件(plugins):插件接口功能极其强大，可以用来处理各种各样的任务。想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。
在这里插入图片描述

安装webpack

在这里插入图片描述

在项目中配置webpack

1.在项目根目录中创建名为webpack.config.js的webpack配置文件，并初始化如下的基本配置：(mode的值有两个可选)
development:
开发环境
不会对打包生成的文件进行代码压缩和性能优化
打包速度快，适合在开发阶段使用
production:
生产环境
会对打包生成的文件进行代码压缩和性能优化
打包速度很慢，仅适合在项目发布阶段使用
在这里插入图片描述 2.在终端运行npm run serve ,需新增脚本在package.json的script节点下：

3.在终端中运行 npm run dev 命令，启动 webpack 进行项目的打包构建

webpack.config.js是webpack的配置文件，webpack在真正开始打包之前，会先读取webpack.config.js，根据里面的配置对项目进行打包。

webpack中自定义打包的入口与出口

在webpack.config.js配置文件中，通过entry节点指定文件打包的入口，通过output节点指定文件打包的出口，
在这里插入图片描述

webpack中的插件：

1.webpack-dev-serve
类似与node.js中的nodemon工具
每当修改了源代码，webpack会自动打包项目
npm install webpack-dev-server -D
 不配置 webpack-dev-server 的情况下，webpack 打包生成的文件，会存放到实际的物理磁盘上 

严格遵守开发者在 webpack.config.js 中指定配置
 根据 output 节点指定路径进行存放
② 配置了 webpack-dev-server 之后，打包生成的文件存放到了内存中

 不再根据 output 节点指定的路径，存放到实际的物理磁盘上
 提高了实时打包输出的性能，因为内存比物理磁盘速度快很多
③webpack-dev-server生成到内存的文件，默认是放到项目的根目录，是虚拟、不可见的

可以用/表示项目根目录，后面跟上想要访问的文件名称，即可访问
例如：/bundle.js 就表示要访问 webpack-dev-server 生成到内存中的 bundle.js 文件

2.html-webpack-plugin
webpack中的HTML插件
可以通过此插件自定制html页面中的内容
npm install html-webpack-plugin -D

在这里插入图片描述

通过 HTML 插件复制到项目根目录中的 index.html 页面，也被放到了内存中
HTML 插件在生成的 index.html 页面，自动注入了打包的 bundle.js 文件

devServer节点

在webpack.config.js中可以通过devServer节点对webpack-dev-server插件进行更多的配置
在这里插入图片描述

只要是修改了webpack.config.js配置文件，或者修改了package.json配置文件，必须重启打包的服务器，否则修改后的配置文件无法生效。

loader

loader 加载器的作用：协助 webpack 打包处理特定的文件，例如：

css-loader 可以打包处理 .css 后缀名的文件
less-loader 可以打包处理 .less 后缀名的文件
babel-loader 可以打包处理 webpack 无法处理的高级 JS 语法
在这里插入图片描述

打包处理 less 文件

① 运行npm i less-loader less -D 命令

②在webpack.config.js 中添加 loader 规则

安装babel-loader相关的包

npm i babel @babel/core @babel/plugin-proposal-decorators -D

在 webpack.config.js 中，添加 loader 规则：

项目开发完成之后，需要使用 webpack 对项目进行打包发布，主要原因有以下两点：

1.开发环境下，打包生成的文件存放于内存中，无法获取到最终打包生成的文件开发环境下，打包生成的文件不会进行代码压缩和性能优化
2.为了让项目能够在生产环境中高性能的运行，因此需要对项目进行打包发布

把图片文件同意生成到image目录中
修改 webpack.config.js 中的 url-loader 配置项，新增 outputPath 选项即可指定图片文件的输出路径：

在这里插入图片描述