前端工程化基础课件-04_Webpack打包图片-JS-Vue.pdf

Webpack打包图片-JS-Vue

王红元coderwhy

目录

content

1Webpack打包图片

2Webpack打包JS代码

3Babel和babel-loader

4Webpack打包Vue

5resolve模块解析

coderwhy加载图片案例准备

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

img元素，设置src属性；

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

这个时候，打包会报错

coderwhy认识assetmoduletype

◼我们当前使用的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，并且配置资源体积限制实现；

coderwhyassetmoduletype的使用

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

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

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

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

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

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

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

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

coderwhyurl-loader的limit效果

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

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

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

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

步骤一：将type修改为asset；

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

coderwhy为什么需要babel？

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

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

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

◼那么，Babel到底是什么呢？

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

包括：语法转换、源代