前端打包工具 —— webpack（三.打包图片，JS，Vue）
webpack 打包图片资源
首先，我们通过上一章节的讲解，我们是可以发现一点的是我们的 webpack 是只可以默认的打包我们的 JS 文件的
所以说为了打包其他的文件类型，比如说我们的 CSS 文件还是图片文件，都是需要进行一些配置来实现 webpack 的打包的
所以说接下来我们就需要配置我们的
webpack.config.cjs来实现对我们的 图片资源进行打包的操作了我们实现处理我们的文件的依赖就是我们的 webpack 内置的模块进行解析处理除了 JS 的其他资源文件
在使用我们的 webpack 进行打包的时候，我们是把这些文件当作的是我们的资源文件来进行处理的
在我们的 webpack5 之前我们实现处理资源文件需要使用到的是一些额外的依赖
raw-loader url-loader | file-loader- 这些依赖都是需要我们进行手动的安装的:
npm install raw-loader url-loader file-loader -D但是在我们现在的 webpack 中我们就可以使用 webpack 内置的资源模块类型（asset module type） 来进行处理了
通过这个 资源模块类型（
asset）来实现我们代替上述的一些额外的依赖:type: asset在该资源类型的前提下我们还可以细分出其他的资源类型
asset/resource
- 用来实现的是就是替代我们的
file-loader依赖的
asset/inline
- 就是用来实现我们的替代
url-loader依赖的
asset/source
- 就是用来实现的是我们的替代以前的
raw-loader依赖的
asset
- 该类型文件可以实现的是我们的在
file-loader和url-loader之间自动的进行取舍，进行选择- 大多数实现选择的是以
file-loader的形式进行加载在我们的后续操作中我们使用的比较多的资源类型是我们的
asset/resource | asset/inline | asset
asset/resource和asset/inline对比
前者
asset/resource实现打包后的代码，向静态资源服务器发送的网络请求次数更多后者的话：
asset/inline我们下载 JS 文件的时间更长，造成我们页面的加载更慢
- 因为后者的话是通过我们的
base64的解析格式实现我们的对图片资源进行编码后- 直接内联的加入的我们的 HTML 文档中的
在实际的开发中，我们为了总和两个的优势我们进行配置的选择是：
对于我们内存占用量比较小的图片，可以选择使用
base64的编码，也是使用asset/inline模块解析对于我们内存资源占用量比较大的图片，我们可以选择直接生成我们单独的 URL 进行打包，通过HTTP请求
- 实现我们的加载页面
asset实现了上面两者的结合，通过一些自定义的配置进行选择打包的类型，来提高我们的性能
webpack 进一步打包JS文件
首先这里我们还是回顾一个点，我们的 webpack 默认是可以进行打包我们的 JS 文件的
但是为了提高我们代码的兼容性问题，所以说我们就需要将我们的 JS 代码进行不同 ecma 规范 的打包
从而来实现我们的代码兼容性的问题，这个时候就需要使用到我们的工具： babel 依赖工具了
这里还记得我们处理 CSS 代码 的兼容性使用的是什么打包工具不？？？使用的是我们的 postcss 来解决的兼容问题的
- 同时我们了解到了三个十分重要的依赖：
postcss-loader | autoprefixer | postcss-preset-envbabel 可以实现的是将我们的 typescript 代码以及 es6 JS代码转化为我们的 es5 之前的 JS代码
- babel 和 postcss 就是我们前端中的两个十分重要的工程化开发的工具链
- 最大的作用是我们的将高版本的 JS 代码转化为我们的向后兼容的 JS 代码：语法转换 + 源代码转换等等
同时我们的 babel 和 postcss 都是支持独立在命令行中实现运行的
- 单独在命令行中使用我们的 babel 工具，我们需要下载两个依赖：
@babel/core | @babel/vli 依赖 -D- 通过我们的 src 指定源文件目录
- --out-dir 实现指定输出的文件夹 dist
babel 中的插件介绍
@babel/plugin-transform-arrow-functions用于实现转义我们的箭头函数
npx babel src --out-dir my_dist --plugins=@babel/plugin-transform-arrow-functions- 但是该插件是不会帮助我们把
const来定义的变量转义为我们的var的- 为了解决这个问题，我们就需要使用另外一个插件了
@babel/plugin-transform-block-scoping
- 见名思意，该插件就是实现的是转化我们的块级作用域的
npx babel src --out-dir my_dist --plugins=@babel/plugin-transform-arrow-functions,@babel/plugin-transform-block-scoping在我们的 webpack 中如果需要使用到 babel 工具的话，我们需要使用到
babel-loader
然后实现我们的在 babel-loader 解析中使用我们的 options 的配置项实现配置即可
当然我们的 babel 和 postcss 是一致的，所以说我们还是可以直接使用babel 的预设来实现的
这个预设就是我们的
@babel/preset-envbebal 中常见的预设含有三种
- env
- react
- typescript
同时我们也是可以使用配置我们的
babel.config.cjs来进行配置的
webpack 打包 vue 文件
首先我们这里声明一点，我们的项目如果想要使用 vue 的开发模式，那么我们项目中一定要含有我们的 vue 依赖
但是这里声明一点，我们的 vue 在我们的生产环境和开发环境中都有所使用，所以说我们的安装模式是：
npm install vue实现解析我们的
vue文件的具体依赖是我们的vue-loader
npm install vue-loader -D同时 vue 官网的配置中还提示了我们在 webpack 的配置中，使用我们的
const { VueLoaderPlugin } = require("vue-loader/dist/index")new VueLoaderPlugin()- 来进行联合的解析我们的 vue 文件
总结
该部分我们讲解了关于 webpack 如何实现打包我们的资源文件，JS的进一步打包以及vue文件的打包流程
