JS基础编程课件04_Webpack打包图片-JS-Vue.pptxVIP

Webpack打包图片-JS-Vue;;为了演示我们项目中可以加载图片，我们需要在项目中使用图片，比较常见的使用图片的方式是两种：

img元素，设置src属性；

其他元素（比如div），设置background-image的css属性；

;我们当前使用的webpack版本是webpack5：

在webpack5之前，加载这些资源我们需要使用一些loader，比如raw-loader、url-loader、file-loader；

在webpack5开始，我们可以直接使用资源模块类型（assetmoduletype），来替代上面的这些loader；

资源模块类型(assetmoduletype)，通过添加4种新的模块类型，来替换所有这些loader：

asset/resource发送一个单独的文件并导出URL。

之前通过使用file-loader实现；

asset/inline导出一个资源的dataURI。

之前通过使用url-loader实现；

asset/source导出资源的源代码

之前通过使用raw-loader实现；

asset在导出一个dataURI和发送一个单独的文件之间自动选择。

之前通过使用url-loader，并且配置资源体积限制实现；

;比如加载图片，我们可以使用下面的方式：

但是，如何可以自定义文件的输出路径和文件名呢？

方式一：修改output，添加assetModuleFilename属性；

方式二：在Rule中，添加一个generator属性，并且设置filename；

我们这里介绍几个最常用的placeholder：

[ext]：处理文件的扩展名；

[name]：处理文件的名称；

[hash]：文件的内容，使用MD4的散列函数处理，生成的一个128位的hash值（32个十六进制）；

;开发中我们往往是小的图片需要转换，但是大的图片直接使用图片即可

这是因为小的图片转换base64之后可以和页面一起被请求，减少不必要的请求过程；

而大的图片也进行转换，反而会影响页面的请求速度；

我们需要两个步骤来实现：

步骤一：将type修改为asset；

步骤二：添加一个parser属性，并且制定dataUrl的条件，添加maxSize属性；

;事实上，在开发中我们很少直接去接触babel，但是babel对于前端开发来说，目前是不可缺少的一部分：

开发中，我们想要使用ES6+的语法，想要使用TypeScript，开发React项目，它们都是离不开Babel的；

所以，学习Babel对于我们理解代码从编写到线上的转变过程至关重要；

那么，Babel到底是什么呢？

Babel是一个工具链，主要用于旧???览器或者环境中将ECMAScript2015+代码转换为向后兼容版本的JavaScript；

包括：语法转换、源代码转换等；

;babel本身可以作为一个独立的工具（和postcss一样），不和webpack等构建工具配置来单独使用。

如果我们希望在命令行尝试使用babel，需要安装如下库：

@babel/core：babel的核心代码，必须安装；

@babel/cli：可以让我们在命令行使用babel；

使用babel来处理我们的源代码：

src：是源文件的目录；

--out-dir：指定要输出的文件夹dist；;比如我们需要转换箭头函数，那么我们就可以使用箭头函数转换相关的插件：

查看转换后的结果：我们会发现const并没有转成var

这是因为plugin-transform-arrow-functions，并没有提供这样的功能；

我们需要使用plugin-transform-block-scoping来完成这样的功能；

;但是如果要转换的内容过多，一个个设置是比较麻烦的，我们可以使用预设（preset）：

后面我们再具体来讲预设代表的含义；

安装@babel/preset-env预设：

执行如下命令：

;在实际开发中，我们通常会在构建工具中通过配置babel来对其进行使用的，比如在webpack中。

那么我们就需要去安装相关的依赖：

如果之前已经安装了@babel/core，那么这里不需要再次安装；

我们可以设置一个规则，在加载js文件时，使用我们的babel：

;如果我们一个个去安装使用插件，那么需要手动来管理大量的babel插件，我们可以直接给webpack提供一个preset，webpack会根据我们的预设来加载对应的插件列表，并且将其传递给babel。

比如常见的预设有三个：

env

react

TypeScript

安装preset-env：

;在开发中我们会编写Vue相关的代码，webpack可以对Vue代码进行解析：

接下来我们编写