代码编织梦想

asset modules资源模块,可以引入除了js、json【这两种文件可以直接引入】以外的任何的其他类型资源
允许我们应用webpack来打包其他的资源文件,比如字体文件、图标文件。

资源模块类型:asset module type,会通过四种新的类型模块来替换所有的loader

asset/resource:会发送一个单独的文件并导出URL
asset/inline:会导出一个资源的Data URI
asset/source:会导出资源的源代码
asset:会在导出一个Data URI 和发送一个单独的文件之间自动进行选择【inline/resource】

output: {
        filename:'bundle.js',
        path: path.resolve(__dirname, './dist'),
        clean: true,
        // 优先级比gennerator低,[contenthash]表示以内容哈希命名,ext表示读取的后缀名
        assetModuleFilename: 'images/[contenthash][ext]'
    },
module:{
        rules:[
            {
            	// 正则表达式,以【.】需要转义,以png结尾
                test:/\.png$/,
                type:'asset/resource',
                // 优先级更高
                generator:{
                    filename:'/images/[contenthash][ext]'
                }
            }
        ]
    }

四种模块

module:{
        rules:[
        	// 会创建资源
            {
                test:/\.png$/,
                type:'asset/resource',
                // 优先级更高
                generator:{
                    filename:'images/[contenthash][ext]',
                }
            },
            // base64,会不创建资源,而是生成base64的链接
            {
                test:/\.svg$/,
                type:'asset/inline',
            },
            {
                test:/\.txt$/,
                type:'asset/source',
            },
            // 当加载的资源大于8kb时,会加载为assets/resource,小于8kb时加载为assets/inline
           		test:/\.jpg$/,
                type:'asset',
                parser:{
                    dataUrlCondition: {
                        maxSize:4*1024*1024,
                    }
                }
        ]
    }
import helloWorld from './hello-world'
import imgsrc from './assets/aijiang.png'
import unvisitedSvg from './assets/unvisited.svg'
import testTxt from './assets/test.txt'
import blueJpg from './assets/blue.jpg'

helloWorld();

const img = document.createElement('img');
img.src = imgsrc;
document.body.appendChild(img);

const img2 = document.createElement('img');
img2.style.cssText = "width:50px;height:50px;"
img2.src = unvisitedSvg;
document.body.appendChild(img2);

const block  = document.createElement('div');
block.style.cssText = "width:200px; height:200px;background:pink;"
block.textContent = testTxt;
document.body.appendChild(block);

const img3 = document.createElement('img');
img3.style.cssText = "width:600px;height:300px;"
img3.src = blueJpg;
document.body.appendChild(img3);
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Paranoia_yy/article/details/127157712

webpack学习笔记(一)_青山拂晓的博客-爱代码爱编程

webpack笔记 webpack是js的模块打包器。当用webpack处理程序时,它会递归的构造一个依赖关系图。其中 包含应用程序的的每个模块,然后将这些模块打包成少量的bundle。 通常只有一个,由浏览器加载。 1.入口Entry 2.出口Output 3.Loader       we

Webpack学习笔记-爱代码爱编程

Webpack的基本使用 文章目录 Webpack的基本使用一.Webpack的基本概念什么是webpack?二.安装Webpack全局安装三.初始化项目文件1.创建配置项2.项目下安装webpack(1)安装时如未指定版本号,则按最新的版本安装,这里webpack安装的是最新的4.17.1的版本(2)npm install --save和npm

webpack系统学习笔记-爱代码爱编程

一、什么是webpack:          webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时,它会在内部从一个或多个入口点构建一个依赖图 ,然后将你项目中所需的每一个模块组合成一个或多个 bundles,它们均为静态资源,用于展示你的内容。 二、webpack配置项: 1、入

Webpack学习笔记(三)-爱代码爱编程

Q7:实现一个自己的打包工具 webpack: 本质上,webpack是一个现代的js应用程序的静态模块打包器。 当webpack处理应用程序的时候,它会递归的构建一个依赖关系图,其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个bundle。 1、ESModule ```js import axios from 'axios';

webpack学习笔记2-爱代码爱编程

Day01 铺垫(自学) yarn包管理器(必须) 快速、可靠、安全的依赖管理工具。和 npm 类似, 都是包管理工具, 可以用于下载包, 就是比npm快 中文官网地址: https://yarn.bootcss.com/ 下载yarn 下载地址: https://yarn.bootcss.com/docs/install/#windows-s

webpack5学习笔记(基础篇)_一只学弱狗!的博客-爱代码爱编程

Webpack 基本概念 是什么? 是一个静态资源打包工具。 可以做什么? 分为两种模式,分别是开发模式和生产模式。 开发模式(development):仅能编译JS中的ES Module语法生产模式(product):既能编译JS中的ES Module语言,还能压缩JS代码入门 创建项目(文件夹)在项目所在文件夹中使用npm init生成p

webpack学习笔记_bennett_g的博客-爱代码爱编程

webpack学习笔记 前言概述模式(mode)核心概念1. 入口(entry)2. 输出(output)3. loader4. 插件(plugins) webpack构建流程初始化阶段构建阶段生成阶段 we

搭建 socket 客户端环境并开发简易版聊天_白驹过隙时光荏苒的博客-爱代码爱编程

搭建 socket 客户端环境 初始⽬录结构说明 ├── build 项目构建配置 │ ├── updateAdapter.js 更改adapter的配置 │ ├── webpack.base.conf.js w

vue学习总结_huxihua2006的博客-爱代码爱编程

vue-element-admin: 1.api下面的业务模块js文件对应view文件的页面 2.components文件夹里放公共组件 3.strore存储,登录token用户信息,全局个人偏好设置等 4.webp

前端开发中webpack常用的node-sass、sass-loader、style-loader等区别作用_c_心欲无痕的博客-爱代码爱编程

本篇文章将介绍 前端开发中webpack常用的node-sass、sass-loader、style-loader、less-loader、style-loader等区别作用; 讲解之前先要介绍一下node?

superset embed dashboard到react app_圆滚滚的程序媛的博客-爱代码爱编程

一、环境 Python 3.8.0 Linux version 3.10.0-1160.53.1.el7.x86_64 node v14.19.0 superset1.5 二、操作步骤 2.1 创建react app 项目 npx npx create-react-app my-app npm npm init react-ap

vue2+vite+vue-cli5 实现vite开发webpack打包_jokersoulclub的博客-爱代码爱编程

1. 为何要用vite开发,但是webpack打包 主要是因为即想要得到vite的高效开发模式(免编译)但是最后又想要兼容到IE9(ps,vite自带插件最多IE11而且打包出两份代码) 2. 实现流程 主要通过利用v

vue3+vite3+vant搭建移动端简易模版_web老猴子的博客-爱代码爱编程

前言 vue3.x相关的生态已经在不断的完善中,相应的UI/路由/pinia等都已成熟,新的项目也在考虑使用新版本开发了,开一个帖子记录一下搭建移动端简易模版的过程,方便以后回顾。 vite前端构建工具 兼容性注

尚硅谷webpack基础学习笔记_webapck 尚硅谷笔记-爱代码爱编程

一、Webpack简介 1、webpack是什么? Webpack是一种前端资源构建工具,一个静态模块打包器(module bundler) 在 Webpack看来,前端的所有资源文件(js/json/css/

尚硅谷webpack学习笔记_尚硅谷 webpack codepsplit 多入口-爱代码爱编程

npm init 全局安装webpack和局部安装 这里注意webpack版本 npm i webpack webpack-cli -g npm i webpack webpack-cli -D 开发环境的配