webpack5 第6页

学习 Webpack5 之路（优化篇）

一、前言从0到1学习的朋友可参考前置学习文章：学习Webpack5之路（基础篇）学习Webpack5之路（实践篇）前置文章学习Webpack5之路（基础篇）对webpack的概念做了简单介绍，学习Webpack5

凹凸实验室·2023-08-07 13:00

Webpack5新手入门简单配置

1.初始化项目yarninit-y2.安装依赖[email protected]@5.0.03.新建index.js说明：写入下面的一句话console.log("hellowebpack");4.执行命令说明：如果没有安装webpack脚手架就不能执行yarnwebpack（webpack-cli）yarnwebpack5.打包后生成dist文件夹6.修改pac

FOREVER-Q·2023-08-06 22:15

webpack图片压缩

减少代码体积|尚硅谷Web前端之Webpack5教程(yk2012.github.io)npminstallimage-mininizerwebpackpluginimagemin-D无损压缩npminstallimagemin-gifsicleimagemin-jpegtranimagemin-optipngimagemin-svgo-D

风别鹤·2023-08-05 19:01

Webpack5 cacheGroups

在Webpack5中，cacheGroups是用于配置代码拆分的规则，它可以帮助你更细粒度地控制生成的代码块。作用：将依赖项（第三方库）从应用代码中抽离出来，提高构建速度。

有趣的小良·2023-08-04 18:31

Webpack5 动态导入按需加载

文章目录一、什么是动态导入和按需加载？二、具体用法示例二、总结一、什么是动态导入和按需加载？传统上，在Webpack中，我们使用import语句可以在代码中静态地导入模块。这意味着所有的模块都会在构建时被打包到bundle中。然而，动态导入和按需加载允许开发者在运行时根据需要动态地加载模块，减少初始加载时间和资源消耗。使用动态导入和按需加载的好处：减少初始加载时间：只加载当前需要的模块，而不是全部

有趣的小良·2023-08-04 18:30

create-react-app 迁移到vite使用 pc和h5共存

背景create-react-app由于升级使用webpack5导致postcss配置不生效。

肥肥呀呀呀·2023-08-04 11:02

Webpack5 生产模式压缩图片ImageMinimizerPlugin

文章目录一、ImageMinimizerPlugin是什么？二、已经有了asset，为什么需要ImageMinimizerPlugin？三、怎么使用ImageMinimizerPlugin？四、ImageMinimizerPlugin压缩的成果一、ImageMinimizerPlugin是什么？它的实际依赖名称是image-minimizer-webpack-plugin，用于使用imagemin

有趣的小良·2023-08-01 13:51

Webpack5 多线程Threads

在Webpack5中，Threads指的是并行处理构建任务的线程，通过充分利用多核CPU的能力来提高构建速度。二、为什么使用Threads？随着前端项目规模的不断增大，构建和打包的速度成为一

有趣的小良·2023-08-01 13:50

webpack入门简册

webpack5简册一、基础理解1、webpack的作用如一个html总会执行第一个script标签里的js代码，之后再执行引入的各种js文件。当然，也可以是多个script标签，变成了多入口。

不乖的肥猫·2023-07-29 10:11

webpack5 学习之路

1.视频01-课程介绍_哔哩哔哩_bilibili2.配套资料依赖环境|尚硅谷Web前端之Webpack5教程3.webpack官方文档入口起点(entrypoints)|webpack中文文档4.vuecli

脱了壳的小乌龟·2023-07-28 16:50

关于vue运行报错：webpack ＜ 5 used to include polyfills for node.js core modules by default.

plugins.push(newNodePolyfillPlugin())}//或者configureWebpack:{plugins:[newNodePolyfillPlugin()],}再次运用，问题解决~原因是由于在webpack5

WeirdoPrincess·2023-07-28 14:19

vue Can‘t resolve ‘path‘

5usedtoincludepolyfillsfornode.jscoremodulesbydefault.Thisisnolongerthecase.Verifyifyouneedthismoduleandconfigureapolyfillforit.这句话的意思是webpack5

土井塔克树1412·2023-07-28 06:57

Webpack5 对bundle分析

使用BundleAnalyzerPlugin在Webpack5中，BundleAnalyzerPlugin是一个用于可视化分析打包结果的插件。

有趣的小良·2023-07-27 10:34

Webpack5 CopyPlugin的作用

在Webpack5中，CopyPlugin是一个插件，用于将文件或目录从源位置复制到构建目录中。它的作用是帮助开发人员在构建过程中将静态文件（如图片、字体等）直接复制到输出目录，而无需经过任何处理。

有趣的小良·2023-07-25 21:56

Webpack5 vue-loader和VueLoaderPlugin

文章目录vue-loader和VueLoaderPlugin的作用vue-loader具体使用方式注意事项vue-loader和VueLoaderPlugin的作用.vue文件是用户用HTML-like的语法编写的Vue组件。每个vue文件都包括三部分,VueLoaderPlugin是一个解析Vue.js的插件，用于在webpack构建过程中解析和转换.vue单文件组件。它的作用是将.vue文件中

有趣的小良·2023-07-25 21:56

Webpack5 生产模式source-map是必须的吗

在Webpack5中，是否需要开启source-map取决于你的具体需求和项目情况。

有趣的小良·2023-07-25 21:55

Webpack5 DefinePlugin的作用

在Webpack5中，DefinePlugin是一个插件，用于创建全局常量，这些常量可以在编译过程中被引用。它的作用是允许开发人员在代码中定义全局变量，这些变量在构建过程中将被替换为其对应的值。

有趣的小良·2023-07-25 21:22

Webpack5核心原理与应用实践（基础用法）一

前言记录Webpack基本配置规则；根据场景、技术栈运用具体方法、工具与技巧。主要有：搭建完善的JavaScript、CSS开发环境；搭建微前端、NPM包、桌面应用等。一、Webpack配置项1.Webpack编译流程Webpak原生配置项数不胜数，最终都会作用于不同阶段大致编译流程可分为四个流程：输入—>模块处理—>后处理—>输出输入：从文件系统读入代码文件模块递归处理：调用Loader转译Mo

天将降大任于我·2023-07-25 11:06

前端工程化第三章：webpack5基础（下）

文章目录1.TypeScript支持（ts-loader）1.1.ts-loader1.1.1.webpack.config.js1.1.2.tsconfig.json1.1.3.src/index.ts1.2.使用babel-loader将ts转换为js1.2.1.webpack.config.js1.2.2.src/index.ts2.代码规范检查（Eslint）2.1.webpack.con

剑九六千里·2023-07-25 02:48

详细总结Webpack5的配置和使用

打包工具使用框架（React、Vue），ES6模块化语法，Less/Sass等CSS预处理器等语法进行开发的代码要想在浏览器运行必须经过编译成浏览器能识别的JS、CSS等语法，才能运行。所以需要打包工具帮我们做完这些事。除此之外，打包工具还能压缩代码、做兼容性处理、提升代码性能等。有哪些打包工具？Grunt、Gulp、Parcel、Webpack、Rollup、Vitewebpack是什么webp

若年封尘·2023-07-24 23:32

webpack5 升级

升级依赖升级依赖https://blog.csdn.net/qq_36131788/article/details/121360686配置文件修改https://blog.csdn.net/sugerinaflat/article/details/120996095?spm=1001.2101.3001.6650.13&utm_medium=distribute.pc_relevant.none-

huaiyanchen·2023-07-23 02:35

webpack5搭建react框架-配置优化

webpack5搭建react框架-配置优化一、前言使用webpack5已经搭建好了基础的开发环境和生产环境，但是有些功能在使用的时候还可以进一步优化，所以今天就来将之前的配置做一下最终的优化。

前端三脚猫·2023-07-21 18:02

webpack5搭建react框架-antd组件库使用

antd组件库使用一、前言前面已经完成了webpack5+react框架的配置搭建，我们在进行项目开发的时候大多还会使用第三方的组件库，而antd组件库在react项目中使用是非常非常多的，所以就将react框架使用最多的antd组件库引入并使用。二、antd组件库引入1、安装npmiantd修改test.jsx文件，增加antd组件库的使用//test.jsximportReactfrom're

前端三脚猫·2023-07-21 18:02

vue移动端预览pdf

lookPdf.vue3.在需要预览的页面进行引入，使用组件4.如果使用pdfh5出现以下问题的时候（我仅列举两个）可以查看一下当前你使用的vue版本是不是5.0（vue-V查看版本）如果是5.0版本，原因是由于在webpack5

路遥努力吧·2023-07-19 14:09

Webpack5 SourceMap

文章目录一、SourceMap有什么用二、怎么使用SourceMap三、需要注意的点提示：以下是本篇文章正文内容，下面案例可供参考一、SourceMap有什么用为什么需要SourceMap开发时我们运行的代码是经过Webpack编译压缩合并之后的，这样的目的是以提高应用程序的性能，但是这种优化也给调试问题带来了困难，因为压缩后的代码难以追踪和调试。这时候，SourceMap技术就能派上用场了。So

有趣的小良·2023-07-14 18:25

Webpack5 CleanWebpackPlugin

文章目录一、clean-webpack-plugin有什么用二、clean-webpack-plugin的使用三、注意事项（很重要）一、clean-webpack-plugin有什么用clean-webpack-plugin是webpack的一个小插件，由于每次打包的时候有可能文件名称和文件内容不一样，打包后的文件就叠加到输出目录下了。所以cleanWebPackPlugin作用就是在每次打包之前

有趣的小良·2023-07-14 18:25

webpack5性能优化

webpack构建速度一、优化babel-loader注意：开启缓存,配置后打包是就能缓存babelwebpack.common.js文件命中缓存cacheDirectory{test:/\.js$/,use:['babel-loader?cacheDirectory'],include:srcPath,exclude:/node_modules/},测试：打包后的结果:注意：打包后promise

Seven_Ting·2023-07-14 18:25

Webpack5开发模式选择

Webpack5是一款强大的模块打包工具，可用于将许多分散的模块按照依赖关系打包成一个（或多个）bundle。

有趣的小良·2023-07-14 18:20

Webpack5有哪些更新？

1.更快的构建速度Webpack5在构建速度方面做出了一些改进，其中最重要的改进是使用持久性缓存。持久性缓存可以将中间结果存储在硬盘上，这些结果可以在下一次构建时被重用，从而减少了构建时间。

前端每日三省·2023-07-14 06:22

webpack5高级配置

webpack多入口注意：webpack5基本配置只是打包产出一个html文件，想要产出多个html就需要进行过入口的配置webpack.common.js注意：公共文件中的入口需要引入两个js文件entry

Seven_Ting·2023-07-14 00:33

webpack高级应用篇（十三）：模块联邦（Module Federation）- 未来组件包更新解决方案

目录两个独立的应用APP1APP2使用模块联邦APP2APP1续篇：基于Promise的动态Remote，让模块联邦版本化Webpack5增加了一个新的功能“模块联邦”，它允许多个webpack构建一起工作

__畫戟__·2023-06-22 16:20

Taro 3.5 beta 编译提速，支持 Webpack5、React 18...

因此在v3.5版本中Taro重点对编译系统进行了重构，引入对Webpack5的支持，改善小程序&H5编译时的性能与体验。

凹凸实验室·2023-06-22 10:28

【前端】webpack5的配置及基本使用

目录一、webpack1.1简介1.2五大核心概念entry(入口)output(出口)loaderplugin(插件)mode(模式)二、配置及使用项目结构使用html-webpack-plugin三、写在最后一、webpack1.1简介webpack是一个现代JavaScript应用程序的静态模块打包器(modulebundler)。在最原始的前端开发中，我们引入js和css等文件都是通过手动

小绵杨Yancy·2023-06-22 10:56

Webpack5开发和生产模式

一、简介前面介绍过，在webpack.config.js的mode配置中有development和production两个选项，那有什么区别呢？本篇文章就简单介绍下。二、开发模式2.1简介开发模式(mode:development)顾名思义就是我们开发代码时使用的模式。这个模式下我们主要做两件事：编译代码，使浏览器能识别运行开发时我们有样式资源、字体图标、图片资源、html资源等，webpack默

小洋人最happy·2023-06-17 11:24

webpack5搭建react框架-生产环境配置

webpack5配置react基础生产环境一、前言在项目构建时不同的环境下会有不同配置，在前面文章中已经使用webpack5配置好了基础环境和开发环境，但是在生产环境时有些配置和开发环境是不需要的，有些是可以在优化的

前端三脚猫·2023-06-17 11:24

webpack生产模式打包跨域解决方法

webpack框架打包跨域问题前言跨域问题思考如何解决跨域总结前言webpack是当前主流的前端打包框架之一，个人学习webpack也是一波三折，从最早的webpack3，到最新的webpack5个人都尝试了一番

鼠娘纳兹玲·2023-06-17 11:24

webpack5基础配置

webpack作为现代前端开发中最火的模块打包工具，广泛应用于前端工程领域，是前端工程师必备的技能之一。以下是我个人针对开发环境和生产环境写的一些webpack基础配置，希望能帮助一些同学：（开发环境）webpack.dev.js：constpath=require("path");constESLintPlugin=require('eslint-webpack-plugin');constHt

RegularEmployee·2023-06-17 11:23

webpack5 基础配置

在开发中，我们会使用vue、react、less、scss等语法进行开发项目，但是浏览器只能识别js、css，或者说在js中使用了es6中的import导入这时候也需要打包工具去转换成浏览器可以识别的语句。一、使用webpack1.初始化package.jsonnpminit-y注意生成的package.json中的name不要叫插件名称否则下载不了。2.下载依赖npmiwebpackwebpac

奥特曼　·2023-06-17 11:23

tree-shaking理解

而webpack5已经自带了这个功能了，当打包环境为production时，默认开启tree-shaking功能一句话就是可以将无引用的代码或者文件不打包进项目，从而优化项目。

大大黄、·2023-06-14 23:47

构建工具 Vite、Webpack、Rollup对比

Webpack介绍热更新方面：webpack支持HMR，但是webpack需要全部重新编译并更新，效率较低tree-shaking：webpack2开始支持且消除效果不好，但是webpack5有更好的tree-shaking

Jeffrey Dean·2023-06-14 17:20

在vue中使用unocss及基本使用方法

unocss的优点安装unocss在打包工具配置文件中配置插件vite配置在webpack5中配置在webopack4中配置创建一个`uno.config.ts配置文件在main.ts中使用安装vscode

头发掉完就不学了·2023-06-13 06:12

webpack食用指北

webpackwebpack前置知识webpack项目初始化webpack配置文件运行webpackloadercss引入对loader的配置的几种写法图片引入url的options自动清除上次打包遗留的资源资源模块类型图片的webpack5

法玛梅林·2023-06-13 00:00

webpack实用配置prod--react（二）

一直以来都是使用脚手架创建应用，现在有空认真研究了一下webpack5，从零开始搭建项目，受益颇多，记下心得，以供参考，开发环境请参考开发环境配置。

小小•愿望·2023-06-12 23:51

express搭建的nodejs项目使用webpack进行打包

背景：本文记录使用express搭建nodejs后台接口服务，为了能放到服务器上面，需要对项目进行压缩打包，使用了webpack5，记录过程和问题。项目结构比较简单，入口是app.js。

沐沐茶壶·2023-06-11 23:07

Webpack5 系列（四）：Babel 的配置

theme:jzmanhighlight:atelier-cave-light一、前言上一篇讲到如何配置一个基本的开发环境。本篇将介绍对于项目中JS文件的处理。二、babel-loaderindex.js```js//箭头函数constadd=(a,b)=>a+b;//Promise对象constpromise1=newPromise((resolve,reject)=>{setTimeout((

Eric_见嘉·2023-06-09 03:03

「Webpack5源码」enhanced-resolve路径解析库源码分析

本文内容基于webpack5.74.0和enhanced-resolve5.12.0版本进行分析webpack5核心流程专栏共有5篇，使用流程图的形式分析了webpack5的构建原理：「Webpack5

·2023-06-08 18:16

webpack处理图片资源（jpeg,jpg,png等）

在webpack5以前，我们处理图片资源通过file-loader和url-loader进行处理现在Webpack5已经将两个Loader功能内置到Webpack里了，我们只需要简单配置即可处理图片资源

jieyucx·2023-06-08 05:53

webpack5 和 webpack4 的区别有哪些？

webpack5和webpack4的区别有哪些？1、TreeShaking作用：如果我们的项目中引入了lodash包，但是我只有了其中的一个方法。其他没有用到的方法是不是冗余的？

Michael18811380328·2023-06-08 01:30

Vue - 项目编译速度、性能优化、打包体积优化

GitHubDemo地址在线预览Vue-项目编译速度、性能优化、打包体积优化序一、编译速度优化1、使用缓存1.1、缓存插件-HardSourceWebpackPlugin1.2、`webpack5`配置

西半球·2023-06-08 01:24

Vue源码解析

diff算法与虚拟DOM-snabbdom-最小量更新原理解析-手写源码-updateChildren]文章目录2.snabbdom简介及准备工作2.1简介2.2搭建初始环境1.安装snabbdom2.安装webpack5

宁然也·2023-06-08 00:18

推荐频道

webpack5