代码编织梦想

当使用webpack打包除了代码文件外的其他静态资源,如图片、文本等时,可以配置webpack自带的资源模块规则进行对应的打包,替代webpack4时期的loader方式。

resource资源

resource是将资源以文件的形式打包到项目目录下,然后在对应的引用处生成文件的链接,例如例子中的1.png会被打包到dist文件夹下
1.png
配置方式如下:

module: {
        rules: [
            {
                test: /\.png$/,
                type: 'asset/resource'
            },
            ]
}

inline资源

inline的模式是将资源变成默认为base64编码的形式加入到项目中,不会生成文件,比如图片、svg等,配置方式如下:

module: {
        rules: [
            {
                test: /\.jpg$/,
                type: 'asset/inline'
            },
        ]
    },

source资源

source的形式是将资源的内容原样应用到项目中,不生成文件,只利用内容,例如下方的a.txt这个文件,打包后不生成文件,但是内容会被放到div中
在这里插入图片描述
在这里插入图片描述在这里插入图片描述
配置方式如下:

module: {
        rules: [
            {
                test: /\.txt$/,
                type: 'asset/source'
            },   
        ]
    },

asset通用资源类型

现在,webpack 将按照默认条件,自动地在 resource 和 inline 之间进行选择:小于 8kb 的文件,将会视为 inline 模块类型,否则会被视为 resource 模块类型。可以通过在 webpack 配置的 module rule 层级中,设置 Rule.parser.dataUrlCondition.maxSize 选项来修改此条件:

module: {
        rules: [
            {
                test: /\.jpg$/,
                type: 'asset',
                // parser: {
                //     // dataUrlCondition: {
                //     //     maxSize: 1024 * 1024
                //     // }
                // }
            },
        ]
    },
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_41869212/article/details/127991839

详解前端模块化工具-webpack-爱代码爱编程

React自发布以来吸引了越来越多的开发者,React开发和模块管理的主流工具webpack也被大家所熟知。那么webpack有哪些优势,可以成为最主流的React开发工具呢? webpack是什么 CommonJS和A

webpack四个模块简介-爱代码爱编程

1.entry 入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。 可以通过在 web

如何使用webpack实现模块化打包?-爱代码爱编程

文章目录 1.webpack的作用2.最基本的小案例2.1生成案例结构2.2 安装webpack2.3 运行命令打包js模块文件2.4 在index.html中引入打包文件2.5 打开页面尝试3.配置webpack的打包过程3.1 enter属性3.2 output属性4.Webpack 工作模式5. 打包结果运行原理 1.webpack的作用

webpack-模块热替换剖析-爱代码爱编程

webpack-模块热替换剖析 目录 文章目录 前言推荐阅读前提`HMR`应用开启`HMR`开启`webpack-dev-server`的`HMR`手动添加代码`HMR`原理步骤 前言 主要讲解热更新的原理推荐阅读 《webpack实战 入门、进阶与调优》前提 早期调试代码基本都是 改代码 - 刷新网页 - 查看 - 修改代码第一次提升

webpack打包图片资源问题-爱代码爱编程

在实际应用中有以下几种图片的引用方式: HTML文件中img标签的src属性引用或者内嵌样式引用<img src="photo.jpg" /> <div style="background:url(photo.jpg)"></div> CSS文件中的背景图等设置.photo { background: ur

webpack(module bundler,模块打包器)-爱代码爱编程

webpack(module bundler,模块打包器)简介 由来:由于前端之前js、css、图片等文件需要单独进行压缩和打包,这样团队人员处理很繁琐,Instagram团队就想让这些工作自动化,然后webpack应运而生 webpack是一个模块打包器(module bundler),webpack视HTML、JS、CSS、图片等文件都是一种资源

webpack模块化-爱代码爱编程

模块化 模块化是一种思想,是一种把复杂系统分解为更好的可管理模块的方式。 把具有一定独立功能的代码放到一个单独的文件中,每一个文件就是一个模块。CommonJS 参考大佬公众号文章 CommonJS 主要运行于服务器端,该规范指出,一个单独的文件就是一个模块。Node.js为主要实践者,它有四个重要的环境变量为模块化的实现提供支持:module、e

webpack5学习与实战-(五)-直接加载资源-爱代码爱编程

在之前的文章中,我们说过,使用webpack内置的asset module可以加载任何资源。那是我们通过import把那些资源当作模块来引入处理的。更多的时候,我们会在代码比如css中直接引入资源。 例如css中的background:url(’./img/test.png’) 一,加载图片资源 .test{ background: url('

webpack(一)——资源模块,loader,代码分离,缓存-爱代码爱编程

安装webpack 安装webpack需要两个主包,在Vscode上新建一个文件夹,在终端打开, 输入node -v检测是否安装了nodejs输入npm -v输入npm install webpack webpack-cli --global安装webpack,会产生一个文件package.json输入命令webpack -v是否安装成功一、资源模块

Webpack读书笔记--简介-爱代码爱编程

一、Webpack概念 Webpack是一个开源的Javascript模块打包工具,其最核心的功能是解决模块之间的依赖,把各个模块按照特定的规则和顺序组织在一起,最终合并为一个JS文件(有时会有多个)。这个过程就叫作模块打包。 二、模块打包工具 (1)模块打包工具的任务就是解决模块间的依赖,使其打包后的结果能运行在浏览器上。它的工作方式主要分为两种(

webpack(5).资源模块-爱代码爱编程

资源模块 经过前几节的学习,目前的配置项目只能加载js。 现在我们想要混合其他资源,比如images,该怎么搞耶? –> 在webpack出现前,前端人员使用grunt或者gulp等工具处理资源,并且把处理后的文件从 src 转移到dist文件夹。 –> webpack除了引用 js,还能使用内置的资源模块Asset Modules来引入其

总结万字长文笔记webpack5打包资源优化_姑老爷呀的博客-爱代码爱编程

webpack如何打包资源优化你有了解吗?或者一个经常被问的面试题,首屏加载如何优化,其实无非就是从http请求、文件资源、图片加载、路由懒加载、预请求,缓存这些方向来优化,通常在使用脚手架中,成熟的脚手架已经给你做了最大的

webpack——模块化技术、常见的打包工具、面试题_爱喝牛奶~的博客-爱代码爱编程

目录 一、模块化技术 二、打包工具怎么来的 三、常见的打包工具 1、**grunt 与 gulp**  2、**snowpack** 3、 **parcel** 4、esbuild 5、 **rollup** 6、vite 7、webpack 四、面试题 1、面试题:什么是webpack? 2、面试题:、webpack 与 gru

webpack5-爱代码爱编程

目录 一、引用1.1、npm包1.2、微前端1.3、其它方案 二、模块联邦(module Federation)三、实践3.1、REMOTE1配置3.2、HOST宿主配置3.3、跨技术栈3.3.1、RE

webpack5学习进阶:library、模块联邦、构建优化_webpack library-爱代码爱编程

文章目录 一、Library1、如何构建 library2、发布为 npm-package 二、模块联邦(Module Federation)1、模块共享管理方式对比2、使用模块联邦2.1、a 项目中

commonjs,es6 module以及webpack模块打包原理_webpack打包esmodule-爱代码爱编程

CommonJS,ES6 Module以及webpack模块打包原理 模块化历程CommonJS模块导出导入 ES6 Module模块导出命名导出默认导出 导入导入命名导出的模块导入默认导出的模块