08_Vue3组件化之webpack5篇(二)

最新推荐文章于 2024-06-07 17:03:35 发布
最新推荐文章于 2024-06-07 17:03:35 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： Vue.js webpack 文章标签： webpack javascript 前端 vue3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50903927/article/details/122797368
版权

Vue3组件化之webpack5篇(二)

加载图片案例准备

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

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

在这里插入图片描述

file-loader

要处理jpg、png等格式的图片，我们也需要有对应的loader：file-loader

  • file-loader的作用就是帮助我们处理import/require()方式引入的一个文件资源，并且会将它放到我们输出的文件夹中；
  • 当然我们待会儿可以学习如何修改它的名字和所在文件夹；

安装file-loader： npm install file-loader -D

配置处理图片的Rule：

在这里插入图片描述

文件的命名规则

有时候我们处理后的文件名称按照一定的规则进行显示：

  • 比如保留原来的文件名、扩展名，同时为了防止重复，包含一个hash值等；

这个时候我们可以使用PlaceHolders来完成，webpack给我们提供了大量的PlaceHolders来显示不同的内容：

  • https://webpack.js.org/loaders/file-loader/#placeholders
  • 我们可以在文档中查阅自己需要的placeholder；

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

  • [ext]： 处理文件的扩展名；
  • [name]：处理文件的名称；
  • [hash]：文件的内容，使用MD4的散列函数处理，生成的一个128位的hash值（32个十六进制）；
  • [contentHash]：在file-loader中和[hash]结果是一致的（在webpack的一些其他地方不一样，后面会讲到）；
  • [hash:]：截图hash的长度，默认32个字符太长了；
  • [path]：文件相对于webpack配置文件的路径；

设置文件的名称

那么我们可以按照如下的格式编写：这个也是vue的写法；

在这里插入图片描述

设置文件的存放路径

当然，我们刚才通过 img/ 已经设置了文件夹，这个也是vue、react脚手架中常见的设置方式：

  • 其实按照这种设置方式就可以了；
  • 当然我们也可以通过outputPath来设置输出的文件夹；

在这里插入图片描述

url-loader

url-loader和file-loader的工作方式是相似的，但是可以将较小的文件，转成base64的URI。

安装url-loader：npm install url-loader -D

在这里插入图片描述

url-loader的limit

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

  • 这是因为小的图片转换base64之后可以和页面一起被请求，减少不必要的请求过程；
  • 而大的图片也进行转换，反而会影响页面的请求速度；

那么，我们如何可以限制哪些大小的图片转换和不转换呢？

  • url-loader有一个options属性limit，可以用于设置转换的限制；
  • 面的代码38kb的图片会进行base64编码，而295kb的不会；

在这里插入图片描述

认识asset module type

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

  • 在webpack5之前，加载这些资源我们需要使用一些loader，比如raw-loader 、url-loader、file-loader；
  • 在webpack5开始，我们可以直接使用资源模块类型（asset module type），来替代上面的这些loader；

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

  • asset/resource 发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现；
  • asset/inline 导出一个资源的 data URI。之前通过使用 url-loader 实现；
  • asset/source 导出资源的源代码。之前通过使用 raw-loader 实现；
  • asset 在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用 url-loader，并且配置资源体积限制实现；
asset module type的使用

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

在这里插入图片描述

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

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

    方式二：在Rule中，添加一个generator属性，并且设置filename；
    在这里插入图片描述

url-loader的limit效果

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

  • 步骤一：将type修改为asset；
  • 步骤二：添加一个parser属性，并且制定dataUrl的条件，添加maxSize属性；

在这里插入图片描述

加载字体文件

如果我们需要使用某些特殊的字体或者字体图标，那么我们会引入很多字体相关的文件，这些文件的处理也是一样的。

首先，我从阿里图标库中下载了几个字体图标：

在这里插入图片描述

在component中引入，并且添加一个i元素用于显示字体图标：

在这里插入图片描述

字体的打包

这个时候打包会报错，因为无法正确的处理eot、ttf、woff等文件：

我们可以选择使用file-loader来处理，也可以选择直接使用webpack5的资源模块类型来处理；

在这里插入图片描述

认识Plugin

Webpack的另一个核心是Plugin，官方有这样一段对Plugin的描述：

While loaders are used to transform certain types of modules, plugins can be leveraged to perform a wider range of tasks like bundle optimization, asset management and injection of environment variables.

上面表达的含义翻译过来就是：

  • Loader是用于特定的模块类型进行转换；
  • Plugin可以用于执行更加广泛的任务，比如打包优化、资源管理、环境变量注入等；

在这里插入图片描述

CleanWebpackPlugin

前面我们演示的过程中，每次修改了一些配置，重新打包时，都需要手动删除dist文件夹：

我们可以借助于一个插件来帮助我们完成，这个插件就是CleanWebpackPlugin；

首先，我们先安装这个插件：npm install clean-webpack-plugin -D

之后在插件中配置：

在这里插入图片描述

HtmlWebpackPlugin

另外还有一个不太规范的地方：

  • 我们的HTML文件是编写在根目录下的，而最终打包的dist文件夹中是没有index.html文件的。
  • 在进行项目部署的时，必然也是需要有对应的入口文件index.html；
  • 所以我们也需要对index.html进行打包处理；

对HTML进行打包处理我们可以使用另外一个插件：npm install html-webpack-plugin -D

在这里插入图片描述

生成index.html分析

我们会发现，现在自动在dist文件夹中，生成了一个index.html的文件：

该文件中也自动添加了我们打包的bundle.js文件；

在这里插入图片描述

这个文件是如何生成的呢？

  • 默认情况下是根据ejs的一个模板来生成的；
  • 在html-webpack-plugin的源码中，有一个default_index.ejs模块；

自定义HTML模板

如果我们想在自己的模块中加入一些比较特别的内容：

  • 比如添加一个noscript标签，在用户的JavaScript被关闭时，给予响应的提示；
  • 比如在开发vue或者react项目时，我们需要一个可以挂载后续组件的根标签 div id=“app”>；

这个我们需要一个属于自己的index.html模块

在这里插入图片描述

自定义模板数据填充

上面的代码中，会有一些类似这样的语法<% 变量 %>，这个是EJS模块填充数据的方式。

在配置HtmlWebpackPlugin时，我们可以添加如下配置：

  • template：指定我们要使用的模块所在的路径；
  • title：在进行htmlWebpackPlugin.options.title读取时，就会读到该信息；

在这里插入图片描述

DefinePlugin的介绍

但是，这个时候编译还是会报错，因为在我们的模块中还使用到一个BASE_URL的常量：

在这里插入图片描述

这是因为在编译template模块时，有一个BASE_URL：

  • link rel=“icon” href="<%= BASE_URL %>favicon.ico">；
  • 但是我们并没有设置过这个常量值，所以会出现没有定义的错误；

这个时候我们可以使用DefinePlugin插件；

DefinePlugin允许在编译时创建配置的全局常量，是一个webpack内置的插件（不需要单独安装）：

在这里插入图片描述

这个时候，编译template就可以正确的编译了，会读取到BASE_URL的值；

CopyWebpackPlugin

在vue的打包过程中，如果我们将一些文件放到public的目录下，那么这个目录会被复制到dist文件夹中。

  • 这个复制的功能，我们可以使用CopyWebpackPlugin来完成；

安装CopyWebpackPlugin插件：npm install copy-webpack-plugin -D

接下来配置CopyWebpackPlugin即可：

  • 复制的规则在patterns中设置；
  • from：设置从哪一个源中开始复制；
  • to：复制到的位置，可以省略，会默认复制到打包的目录下；
  • globOptions：设置一些额外的选项，其中可以编写需要忽略的文件：
    • .DS_Store：mac目录下回自动生成的一个文件；
    • index.html：也不需要复制，因为我们已经通过HtmlWebpackPlugin完成了index.html的生成；

Mode配置

前面我们一直没有讲mode。

Mode配置选项，可以告知webpack使用响应模式的内置优化：

  • 默认值是production（什么都不设置的情况下）；
  • 可选值有：‘none’ | ‘development’ | ‘production’；

这几个选项有什么样的区别呢?
在这里插入图片描述

Mode配置代表更多

在这里插入图片描述

酒 客
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Webpack5 CopyPlugin的作用
有趣的小良的博客
07-25 1067
在Webpack 5中，CopyPlugin是一个插件，用于将文件或目录从源位置复制到构建目录中。它的作用是帮助开发人员在构建过程中将静态文件（如图片、字体等）直接复制到输出目录，而无需经过任何处理。CopyPlugin并不是必须的，它的使用与具体项目需求相关。如果你的项目需要复制一些静态资源到构建目录中，可以使用CopyPlugin来完成这个任务。总结：CopyPlugin的作用是复制文件或目录到构建目录中，根据项目需求而定，不是必须的插件。目录下的文件复制到输出目录的。目录下的文件复制到输出目录的。
前端学习笔记202303学习笔记第三天-Vue3.0-url-loader的loader格式
qq_41632427的博客
04-05 190
前端
VUE2.7项目配置webpack打包-详细操作步骤
最新发布
CC酱写前端的博客
06-07 1315
Webpack是一个打包工具，可以把JS、CSS、Node Module、Coffeescrip、SCSS/LESS、图片等都打包在一起，因此，现在几乎所有的SPA项目、JS项目都会用到Webpack。GitHub为https://github.com/webpack/ webpack。
webpack5打包原理及应用（插件篇）
weixin_46248051的博客
04-06 1325
webpack5打包原理及应用（插件篇） 概念: loader：通常用来完成非JavaScript模块的转化成webpack能处理的模块； plugin：能够完成更多定制化操作的插件 🚀 如果想要插件起作用，需要在webpack.config.js中的 plugins 数组中进行实例的传递 // webpack.config.js基础配置 const path = require('path') module.exports = { entry: './src/main.js', ou
webpack5 静态资源管理 devServer static使用和copy-webpack-plugin区别
weixin_44680009的博客
10-22 1918
webpack5 静态资源管理 devServer static使用和copy-webpack-plugin区别
【前端】webpack5常用loader和plugin
小绵杨
09-06 1126
可以看到，loader和plugin非常多，并且配置起来也并不容易，所以我们每次都是直接使用别人封装好的脚手架，然后进行项目开发，例如vue-cli或者create-react-app等常用脚手架。但是了解了基本的loader和plugin作用，对于我们排除错误或者对项目的理解都有很大的帮助。腾讯TNTWeb前端团队 - 吐血整理的webpack入门知识及常用loader和plugin。
vue2+webpack搭建h5框架
03-12
通过Vue2和Webpack的结合，我们可以构建出高效、可维护的H5应用程序，利用Vue的组件化思想和Webpack的模块化管理，提升开发效率和项目质量。同时，随着项目规模的增长，还可以进一步引入Vue生态中的其他工具和库，如...
前端框架及项目面试－聚焦Vue3、React、Webpack（最新升级版，包升级）
01-13
本课程"前端框架及项目面试－聚焦Vue3/React/Webpack"是针对这一领域的最新升级版，旨在帮助开发者掌握并理解三大主流前端框架Vue3、React以及Webpack的核心概念和实际应用。 Vue3作为Vue.js框架的最新版本，引入了...
webpack_number8fv_vue企业网站_vue企业建站_vuewebpack_vue企业站_
10-01
1. **Vue组件化开发**：Vue.js的核心特性是组件化，这使得代码结构清晰，可复用性强。在企业网站中，常见的组件可能包括导航栏、轮播图、新闻列表、关于我们页面等。 2. **路由管理**：Vue Router是Vue.js的官方...
前端框架及项目面试－聚焦Vue3、React、Webpack
01-14
1. **Composition API**：Vue3引入了Composition API，这是一种更加灵活的组织组件逻辑的方式，可以更好地实现代码复用和模块化。 2. **Suspense组件**：允许开发者在组件渲染之前显示一个加载占位符，提高了用户...
vue2.6+webpack5+typescript
09-07
2. **Webpack 5**: Webpack 5 是 Webpack 的最新版本，其主要改进包括对二进制数据处理的优化、更好的性能和内存使用，以及默认支持了零配置的TypeScript。配置Webpack时，我们需要定义入口、出口、加载器（如`vue-...
webpack 实现 CopyWebpackPlugin
知之为知之，不知为不知
05-25 1127
CopyWebpackPlugin 将已经存在的单个文件或整个目录复制到构建目录。
webpack5教程
又逢乱世
08-27 1393
简介 本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。 ..................
webpack
无名小小卒的博客
01-12 5706
webpack
webpack打包之 copy-webpack-plugin
qq_40922656的博客
07-18 2605
在离线应用中，前端所有文件都需在在本地，有些文件（比如iconFont以及一些静态img)需要转为离线文件，这些文件可以直接引用更方便些，这就需要在打包时直接复制到打包文件下。copy-webpack-plugin 打包复制文件插件。3、配置webpack。1、什么时候要使用？
webpack：详解CopyWebpackPlugin，复制的同时修改文件内容
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
09-16 3288
CopyWebpackPlugin 是一个强大的 Webpack 插件，用于将文件从源目录复制到构建目录。在本文中，我们将探讨 CopyWebpackPlugin 的一些常用 API，并提供示例代码。在构建 Web 应用程序时，通常需要将一些静态文件（如 HTML、CSS、图片等）从源目录复制到构建目录。为了实现这一功能，我们可以使用 CopyWebpackPlugin。这个插件可以将源文件复制到构建目录，并且可以自定义复制行为。
Copy Plugin版本问题
xiao廸要飞
11-19 1382
我的版本 => "copy-webpack-plugin": "^6.3.1", 运行 npx webpack 报错 => [webpack-cli] ValidationError: Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema. - options[0] misses the property
webpack（五） 常用plugins
Yushia的博客
04-06 3283
webpack中的plugin，赋予其各种灵活的功能，例如打包优化、资源管理、环境变量注入等，它们会运行在 webpack 的不同阶段（钩子 / 生命周期），贯穿了webpack整个编译周期
webpack 5--学习笔记
xiongfang1105的专栏
03-27 1470
webpack 5–学习笔记 部分配置文件 const path = require('path') const CopyWebpackPlugin = require('copy-webpack-plugin') const { CleanWebpackPlugin } = require('clean-webpack-plugin') //npm i clean-webpack-plugin -D const { DefinePlugin } = require('webpack') const
webpack如何处理vue异步组件
06-14
Webpack 在处理 Vue 异步组件时，会通过代码分割 (code splitting) 把组件打包成独立的文件，从而实现按需加载。 在处理 Vue 异步组件时，Webpack 会将每个异步组件转化为一个 webpack 异步模块 (webpack async module)。每个异步组件都会被打包成一个独立的 JavaScript 文件，这个文件包含了组件的代码和相关依赖。 当应用程序需要渲染该异步组件时，Webpack 会发起一个网络请求，从服务器上加载这个 JavaScript 文件。加载完成后，组件就可以被渲染出来了。 在 Vue 中，异步组件可以通过两种方式来定义： 1. 使用 `Vue.component()` 方法定义异步组件，这种方式在上一个问题中已经讲过。 2. 使用 `Vue.asyncComponent()` 方法定义异步组件，这种方式可以更加细粒度地控制组件的加载方式。例如，可以为异步组件指定加载中和加载出错时的组件。下面是一个例子： ``` Vue.asyncComponent('my-component', () => ({ // 需要加载的组件 component: import('./MyComponent.vue'), // 加载中时显示的组件 loading: LoadingComponent, // 出错时显示的组件 error: ErrorComponent, // 渲染完成时执行的回调函数 delay: 200, // 最长等待时间 timeout: 10000 })) ``` 在这个例子中，`Vue.asyncComponent()` 方法接受两个参数：组件的名称和一个返回值为对象的函数。这个对象中包含了组件的相关配置，包括需要加载的组件、加载中时显示的组件、出错时显示的组件、渲染完成时执行的回调函数、最长等待时间等。 总的来说，Webpack 在处理 Vue 异步组件时，会通过代码分割和异步加载的方式，实现对组件的按需加载。这可以提高应用程序的性能，减少初始化时的加载时间，提升用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值