• 2024-09-13从零开始一步一步搭建 Vue3 + Webpack5 项目脚手架指南
    **
  • 2024-08-22webpack4升级到webpack5后部分页面出现Uncaught (in promise) ReferenceError: Cannot access '__WEBPACK_DEFAUL
    循环依赖当两个或多个模块相互引用时,就会发生JavaScript中的循环依赖(也称为循环依赖)。这可以是直接引用(A->B->A):或间接( A->B->C->A):虽然循环依赖可能不会直接导致错误,但它们几乎总是会带来意想不到的后果。这可能表现为TypeScript类型检查缓慢或开发服务器频
  • 2024-03-20webpack5零基础入门-11处理html资源
    1.目的主要是为了自动引入打包后的js与css资源,避免手动引入2.安装相关包npminstall--save-devhtml-webpack-plugin3.引入插件constHtmlWebpackPlugin=require('html-webpack-plugin');4.添加插件(通过new方法调用)/**插件*/plugins:[//plugin配置
  • 2024-03-01webpack5多入口的时候HtmlWebpackPlugin怎么处理多个html文件
    constHtmlWebpackPlugin=require('html-webpack-plugin');module.exports={entry:{app1:'./src/app1.js',app2:'./src/app2.js'},output:{filename:'[name].bundle.js',path:path.resolve
  • 2024-02-02延迟Promise/单项目多npm版本/webpack好处/webpack5构建速度
    《Promise.withResolvers延迟Promise》https://sorrycc.com/promise-with-resolvers/promise当被reject之后,再次resolve,都是会返回reject的消息一个npm包的多个版本webpack好处需要通过模块化的方式来开发使用一些高级的特性来加快我们的开发效率或者安全性,比如通过ES6
  • 2023-12-13基于 Webpack5 Module Federation 的业务解耦实践
    我们是袋鼠云数栈UED团队,致力于打造优秀的一站式数据中台产品。我们始终保持工匠精神,探索前端道路,为社区积累并传播经验价值。本文作者:贝儿前言本文中会提到很多目前数栈中使用的特定名词,统一做下解释描述dt-common:每个子产品都会引入的公共包(类似NPM包)AppMenus:在
  • 2023-10-01Webpack5 基础使用笔记
    [webpack中文文档](概念|webpack中文文档|webpack中文文档|webpack中文网(webpackjs.com)):本质上,webpack是一个用于现代JavaScript应用程序的静态模块打包工具。当webpack处理应用程序时,它会在内部从一个或多个入口点构建一个依赖图(dependencygraph),然后将你
  • 2023-08-03webpack5 devServer浏览器打开显示 can not get
    webpack5中通过使用webpack-dev-server插件,配置devServer来浏览器启动页面,对于单页面,我们可以直接配置打开首页,多页面,可以配置打开一个文件目录,选择各个页面的目录当我们配置好webpack后,执行npmrundev,浏览器打开经常会看到显示  cannotget,即无法匹配服务器匹配的目
  • 2023-06-06Webpack5 联邦模块
    模块联邦在大型项目中,往往会把项目中的某个区域或功能模块作为单独的项目开发,最终形成「微前端」架构在微前端架构中,不同的工程可能出现下面的场景这涉及到很多非常棘手的问题:如何避免公共模块重复打包如何将某个项目中一部分模块分享出去,同时还要避免重复打包如何管理依赖的不同版
  • 2023-05-30webpack5功能升级
    webpack5此版本重点关注以下内容:通过持久缓存提高构建性能.使用更好的算法和默认值来改善长期缓存.通过更好的树摇和代码生成来改善捆绑包大小.清除处于怪异状态的内部结构,同时在v4中实现功能而不引入任何重大更改.通过引入重大更改来为将来的功能做准备,以使我们能够尽
  • 2023-04-29chatGTP对webpack4与webpack5的区别的分析
    chatGTP对webpack4与webpack5的区别的分析问1:webpack5与webpack4主要的区别是什么?chatGTP的回答Webpack5与Webpack4的主要区别如下:性能优化:Webpack5在构建速度和性能方面进行了大量的优化,从而可以更快地构建应用程序和库。TreeShaking:Webpack5对TreeShaking进行了改进
  • 2023-04-26qiankun vue子应用升级webpack5问题记录
    升级的方式是使用最新版本的vue-cli脚手架,重新创建一个新项目,然后复制@vue/cli-xxx,vue相关依赖最新版本到子应用项目->核对babel,eslint相关配置的变化->重新安装依赖,处理出现的相各种异常情况->启动项目检查功能是否正常。本次升级主要是为了使用webpack5。以下
  • 2023-03-19最新 umi4-max 如何使用 webpack5 联邦模块
    新项目用umi4-max搭建,部分功能想要使用其他项目的功能,不想重新开发,想到了使用webpack5的联邦模块,可以直接引用其他项目代码来实现共享代码。理想很美好,现实很残酷。直
  • 2023-01-29一文详解如何在基于webpack5的react项目中使用svg
    本文主要讨论基于webpack5+TypeScript的React项目(cra、craco底层本质都是使用webpack,所以同理)在2023年的今天是如何在项目中使用svg资源的。首先,假定您已经完成基于webpac
  • 2023-01-26【个人笔记】2023年搭建基于webpack5与typescript的react项目
    写在前面由于我在另外的一些文章所讨论或分析的内容可能基于一个已经初始化好的项目,为了避免每一个文章都重复的描述如何搭建项目,我在本文会统一记录下来,今后相关的文章直
  • 2022-12-28webpack5 配置多线程和缓存加快构建速度
    webpack5内置了缓存配置在webpack配置对象下,增加:cache:{type:'filesystem',allowCollectingMemory:true}webpack5可以通过引入 threa
  • 2022-12-24webpack5出现process is not defined
    webpack5开始不再polyfillnode内置模块,需要手动引入https://stackoverflow.com/questions/65018431/webpack-5-uncaught-referenceerror-process-is-not-definedhttps:/
  • 2022-11-22Web 前端之 Webpack5 教程
    Webpack是一个静态资源打包工具。它会以一个或多个文件作为打包的入口,将我们整个项目所有文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件,就可以在浏
  • 2022-11-08webpack5的基础配置
    npminit-y==>生成package.json文件npmitypescript-g==>全局安装ts编译器tsctsc-h==>tsc的帮助信息tsc--init==》创建tsc的配置文件tscon
  • 2022-11-06webpack5打包出的js在ie11, ie10中报错
    使用webpack5默认打包出来的js文件在ie11,ie10中报错SCRIPT1002:语法错误bundle.js(1,14)。原因和babel设置无关,webpack5中默认打包出来的js文件会用es6语法中的箭头函
  • 2022-11-05webpack5 学习手册
    1.初始化webpack项目npminit-y(初始化一个package.json文件)2.npmiwebpackwebpack-cli-D下载这两个依赖包3.npxwebpack./src/main.js--modedevelopme
  • 2022-10-172022-webpack5实战教程
    前言手摸手教你如何打包,让你在动手的实践过程中感受webpack。在动手之前,你可先简单了解一下webpack的概念每一小结都有对应的分支,方便大家学习webpack版本:5.58.1入门
  • 2022-10-12webpack5 + vue3 打包问题
    1,打包后本地访问空白或者404问题解决办法:  2, 打包CSS图片路径不正确问题在生产模式下,使用的MiniCssExtractPlugin.loader代替style-loader,但图片、字体等资源
  • 2022-10-07webpack5简单配置
    webpack4之后webpack5又做了蛮多的变化,这里简单介绍一下webpack5的配置可以参考官网mkdirreact-clicdreact-clinpminit初始化package.jsonnpminstallwebpack
  • 2022-10-05 WebPack5 处理图片资源
    过去在Webpack4时,我们处理图片资源通过 file-loader 和 url-loader 进行处理现在Webpack5已经将两个Loader功能内置到Webpack里了,我们只需要简单配置即可处理