E-COM-NET
首页
在线工具
Layui镜像站
SUI文档
联系我们
推荐频道
Java
PHP
C++
C
C#
Python
Ruby
go语言
Scala
Servlet
Vue
MySQL
NoSQL
Redis
CSS
Oracle
SQL Server
DB2
HBase
Http
HTML5
Spring
Ajax
Jquery
JavaScript
Json
XML
NodeJs
mybatis
Hibernate
算法
设计模式
shell
数据结构
大数据
JS
消息中间件
正则表达式
Tomcat
SQL
Nginx
Shiro
Maven
Linux
Webpack5
从0到1使用
Webpack5
+ React + TS 构建标准化应用
前言本篇文章主要讲解如何从一个空目录开始,建立起一个基于webpack+react+typescript的标准化前端应用。技术栈:webpack5+React18+TS工程化:eslint+prettier+husky+githooks支持图片、less、sass、fonts、数据资源(JSON、csv、tsv等)、Antd按需加载以及主题支持热更新、资源压缩、代码分离(动态导入、懒加载等)、缓存
阿里云云栖号
·
2023-10-11 07:16
webpack
前端
javascript
云计算
阿里云
从0到1使用
Webpack5
+ React + TS构建标准化应用
前言本篇文章主要讲解如何从一个空目录开始,建立起一个基于webpack+react+typescript的标准化前端应用。技术栈:webpack5+React18+TS工程化:eslint+prettier+husky+githooks支持图片、less、sass、fonts、数据资源(JSON、csv、tsv等)、Antd按需加载以及主题支持热更新、资源压缩、代码分离(动态导入、懒加载等)、缓存
一堆土豆33
·
2023-10-11 07:15
react.js
webpack
javascript
js 和 css 打包分离
参考官方文档:https://webpack.docschina.org/plugins/mini-css-extract-plugin/
webpack5
以上可用,用mini-css-extract-plugin
fred_33c7
·
2023-10-09 22:53
【前端学习记录】webpack学习之mini-css-extract-plugin插件
前言最近在学习尚硅谷的
webpack5
课程,看到mini-css-extract-plugin这个插件的时候,感觉很有帮助,之前都没有在css这方面深入思考过,课程中的一些记录写在下面为什么需要优化CSSCss
Note_creek
·
2023-10-09 22:57
前端
前端
webpack
css
webpack-资源模块类型(asset module type)使用详解
我们当前使用的webpack版本是
webpack5
:在
webpack5
之前,加载这些资源我们需要使用一些loader,比如raw-loader、url-loader、file-loader;在
webpack5
ICanWin_lll
·
2023-10-08 20:27
webpack学习笔记
javascript
webpack
前端
Webpack5
中CSS处理(单独文件、兼容及压缩)
文章目录一、CSS处理1.1单独文件1.1.1安装依赖1.1.2配置1.1.3测试1.2兼容处理1.2.1安装依赖1.2.2配置1.2.3控制兼容性1.2.4测试1.3压缩1.3.1安装依赖1.3.2配置1.3.3测试二、HTML处理2.1压缩一、CSS处理1.1单独文件css文件目前被打包到js文件中,当js文件加载时,会创建一个style标签来生成样式这样对于网站来说,会出现闪屏现象,用户体验
小洋人最happy
·
2023-10-03 00:20
webpack
css压缩
css兼容
css独立文件
webpack5
extract-plugin
Webpack5
快速入门 (二) CSS相关loader的使用及兼容性处理 手把手带你打开前端工程化的大门
目录一、CSS-Loader为什么需要loadercss-loader的使用二、style-loader的使用三、browserslitrc工作流程通过.browserslistrc配置文件进行筛选四、postcss工作流程五、Postcss-loader处理兼容postcss预设给postcss添加配置文件六、importLoaders属性大家好,这里是小杰,这是webpack相关学习的第二期,
YinJie…
·
2023-09-30 12:41
webpack
javascript
webpack
前端
WebPack5
进阶使用总结(二)
WebPack5
进阶使用总结1、处理js资源1.1、Eslint1.2、在webpack中使用Eslint1.3、Babel1.4、在webpack中使用2、处理HTML资源3、开发服务器&自动化4、生产模式介绍
生命是有光的
·
2023-09-29 07:07
#
WebPack灬大罗
前端
javascript
webpack
WebPack5
高级使用总结(三)
WebPack5
高级使用总结1、提升开发体检1.1、SourceMap1.2、使用2、提升打包构建速度2.1、HotModuleReplacement2.2、oneOf2.3、Include/Exclude2.4
生命是有光的
·
2023-09-29 07:07
#
WebPack灬大罗
webpack
SyntaxError: /xx.vue: Unexpected token, expected “,“
本地老工程vue2.7.x+webpack4在升级
webpack5
的时候遇启动和打包报错:SyntaxError:SyntaxError:/xxxxx.vueUnexpectedtoken,expected
·
2023-09-27 12:04
webpack5
基于React+Antd搭建开发和生产环境
主要涉及目录说明:package.json所使用插件版本和启动命令/浏览器兼容版本babel.config.js处理语法兼容.eslintrc.js开启eslint检测config目录包含:webpack.base.js基础公共环境配置项webpack.dev.js开发环境配置项webpack.prod.js生产环境配置项package.json文件和配置项{"name":"react-proje
追逐梦想之路_随笔
·
2023-09-26 08:35
react
自动化构建工具
react.js
javascript
webpack
webpack:详解cache模块常用配置
背景持久化缓存算得上是
Webpack5
最令人振奋的特性之一,它能够将首次构建结果持久化到本地文件系统,在下次执行构建时跳过一系列解析、链接、编译等非常消耗性能的操作,直接复用module、chunk的构建结果
Lvan的前端笔记
·
2023-09-26 07:50
#
前端工程化
webpack
前端
node.js
前端教程-webpack
官网webpackwebpack基础视频教程尚硅谷
Webpack5
入门到原理(面试开发一条龙)
累牛满面
·
2023-09-24 21:26
前端
前端
webpack
node.js
Webpack5
——2022保姆级基础教程
Webpack1、Webpack2、下载使用3、配置Webpack3.1模式mode3.2入口entry3.3依赖图3.4出口output3.5loader配置使用内联使用style-loaderless-loaderBrowserslistrc配置postcss-loaderimportLoaders属性file-loader处理图片img.srcbackground-imageurl设置图片名
焦妮敲代码
·
2023-09-23 14:48
#
Webpack
webpack
javascript
WebPack5
基础使用总结(一)
WebPack5
基础使用总结1、WebPack1.1、开始使用1.2、基本配置2、处理样式资源2.1、处理Css资源2.2、处理Less资源2.3、处理Sass和Scss资源2.4、处理Styl资源3、
生命是有光的
·
2023-09-23 10:37
#
WebPack灬大罗
vue.js
webpack
解锁前端Vue3宝藏级资料 第五章 Vue 组件应用 5 (Vue 插件)
第一章Vue3项目创建1VueCLI创建vue项目第一章Vue3项目创建2使用
Webpack5
搭建vue项目第一章Vue3项目创建3
Zht_bs
·
2023-09-21 13:02
vue
前端
vue.js
javascript
webpack5
构建ts开发项目实用教程
目录一、安装webpack和webpack-cli二、webpack-cliinit选择配置1、是否安装@webpack-cli/generator2、选择语言3、是否使用webpack-dev-server4、是否创建html在仓库里5、是否需要pwa6、css预处理7、是否使用PostCSS8、提取css9、选择包管理器9、是否要覆盖原来package.json三、重点关注webpack.co
任磊abc
·
2023-09-21 05:14
node
typescript
webpack5
自己构建脚手架
webpack5
五个概念entry:哪个文件为入口起点开始打包output:输出的资源到哪里去,叫什么名字loader:翻译官,webpack只能处理js代码,其他要交给loader来处理。plugins,插件,执行范围更广的任务,如压缩mode。开发模式(development):本地可以运行就可以,生产模式(production):代码优化上线执行打包1.纯命令行#安装。不加版本号默认安装最新版本npmins
猫哥不给力
·
2023-09-17 16:04
webpack
javascript
前端
webpack5
项目-配置模块如何解析
前端-
webpack5
汇总目录一.解析模块时应搜索的目录二.解析指定扩展名文件三.解析别名四.总结一.解析模块时应搜索的目录module.exports={//...resolve:{modules:[
yaoyongcsdn
·
2023-09-17 16:04
前端
webpack
rust构建WebAssembly,以及
webpack5
调用
rust构建wasm1.构建项目cargonew--libhello-wasm2.示例代码src/lib.rsexterncratewasm_bindgen;usewasm_bindgen::prelude::*;#[wasm_bindgen]extern{//在Rust中调用来自JavaScript的外部函数pubfnalert(s:&str);}//提供外面调用方法#[wasm_bindgen
锦衣夜行_
·
2023-09-15 08:02
rust
wasm
开发语言
webassembly
Vue3
webpack5
项目启动报错module property was removed from Dependency
一、启动新项目时Vue3,
webpack5
项目启动报错modulepropertywasremovedfromDependency,12%是个坎查了下资料原因是Looksliketheyareworkingonaddingwebpack5supporttovue3
MAYDAY77
·
2023-09-13 12:34
webpack4升级到
webpack5
经验总结
考虑到
webpack5
已经正式发布近两年,跟webpack相关的依赖包应该适配的差不多了,于是打算先把webpack4升级到
webpack5
,然后基于
webpack5
再进行优化。
fanfei_666
·
2023-09-11 00:11
webpack
javascript
npm
前端
single-spa微前端项目落地
目前主流的微前端方式,主要有iframe,single-spa,qiankun,micro-app以及
webpack5
的moduleferderation等。鉴于我
halapro_liu
·
2023-09-08 20:16
Webpack5
搭建Vue(基础版)
系列文章目录文章目录系列文章目录前言(进阶版本如下)第一步:准备工作1.初始化项目2.准备工作(安装依赖)依赖说明如下依赖code如下:依赖安装如下图:第二步:编写webpack.config.js1.配置字段说明2.webpack.config.js完整配置如下(有解释说明)第三步:src下的文件1.main.js2.app.vue文件第四步:问题汇总(关于第二步出现的问题)1.打包文件名称问题
满脑子技术的前端工程师
·
2023-09-06 15:54
vue.js
webpack
javascript
前端
webpack5
+ vite2 入门
Webpack笔记从使用webpack的角度来说,搞清楚webpack的配置即可安装需要node14+和npm(安装node时自动安装)。全局安装npminstallwebpackwebpack-cli-g局部安装(推荐)npminit-y-D表示安装的开发依赖。加不加并不影响,但是推荐加,这样项目package.json会整洁些。npminstallwebpackwebpack-cli-D基本使
缓次郎
·
2023-09-06 15:49
Vue
前端
webpack
vue
javascript
Webpack5
搭建Vue项目(进阶版)
Webpack5
搭建Vue项目(进阶版)提示:中间隔了好长时间,我胡汉三又回来继续更新了!!!文章目录
Webpack5
搭建Vue项目(进阶版)前言一、进阶版本有哪些特点?
满脑子技术的前端工程师
·
2023-09-06 15:48
vue.js
前端
javascript
Webpack5
入门到原理
Webpack5
学习尚硅谷
Webpack5
新版视频教程B站直达:https://www.bilibili.com/video/BV14T4y1z7sw百度网盘:https://pan.baidu.com
szx的开发笔记
·
2023-09-06 15:16
webpack
vue
从构建进程间缓存设计 谈
Webpack5
优化和工作原理
从构建进程间缓存设计谈
Webpack5
优化和工作原理翻看日历,发现今天是2020庚子年第一个节气——立春。上古以“斗柄指向”法,用北斗星斗柄指向寅位时为立春。
LucasHC
·
2023-09-05 23:08
webpack5
(三)
webpack高级配置其实就是对webpack进行优化,让代码在编译/运行时性能更好1.提升开发体验2.提升打包构建速度3.减少代码体积4.优化代码运行性能一、提升开发体验sourcemap在编译打包后所有的css和js都合并为了一个文件,并多了很多其他代码,如果此时代码运行出错,提示的错误位置很难定位。所以开发者需要更准确的错误提示来进行开发工作。SourceMap源代码映射,是一个用来生成源代
Mqyyy
·
2023-09-05 23:07
webpack5
前端
webpack
webpack5
(四)
react-cli中配置开发环境constpath=require('path')constEslintWebpackPlugin=require('eslint-webpack-plugin')constHtmlWebpackPlugin=require('html-webpack-plugin')constReactRefreshWebpackPlugin=require('@pmmmwh/r
Mqyyy
·
2023-09-05 23:05
webpack5
前端
webpack
前端弹性可伸缩架构解决方案——Dynamic Import与
Webpack5
Module Federation
导语:项目示例代码可参考个人仓库https://github.com/ZhenxingXiao/webpack-trial-demo,代码在webpack入门代码基础之上增加ModuleFederation模块支持,方便入门使用。更多复杂(例如配置SSR情况)情形示例可参考https://github.com/module-federation/module-federation-examples
萧雨山
·
2023-09-02 19:15
Webpack5
学习笔记(二):Webpack开发环境基本配置
Webpack5
学习笔记(二):Webpack开发环境基本配置Author:哇哇小仔Date:2021-03-18Webpack版本:webpack5.24.4webpack-cli4.5.0说明:尚硅谷
哇哇小仔
·
2023-09-02 15:37
前端开发
webpack
webpack5
webpack学习笔记01 生产环境的基本配置-开发环境的基本配置
文章目录webpack学习笔记面试题概述Webpack的五个概念Webpcak开发模式基本配置预处理器Loader打包样式资源打包图片资源
webpack5
有改动打包其他资源iconfont等webpcak5
nuise_
·
2023-09-02 15:36
其他
webpack
学习
前端
基于 vue3 + webpack 5 + sass+ vw 适配方案+axios 封装,从0构建手机端模板脚手架
Webpack5
正式发布也有很长长长一段时间了,上手了一段时候后发现真香。
webpack5
的新特性使得我们在配置上比以往版本更加方便了,构建速度也有了质的飞跃。
·
2023-09-01 16:14
vue.js前端webpack
Typescript快速入门
Typescript快速入门Typescript快速入门一、快速入门0、TypeScript简介1、TypeScript开发环境搭建2、基本类型3、编译选项4、
webpack5
、Babel二、面向对象0
会思想的苇草i
·
2023-09-01 11:37
前端
typescript
javascript
前端
类型体操
经验分享
详细介绍
Webpack5
中的Loader
loader用于帮助webpack将不同类型的文件转换为webpack可识别的模块。优先级分类pre:前置loadernormal:普通loader,没有用enforce指定就是normalinline:内联loaderpost:后置loaderloader执行顺序pre>normal>inline>post相同优先级的loader执行顺序为:从右到左,从下到上。使用loader的方式1.配置方式
若年封尘
·
2023-08-31 13:19
前端
#
Webpack
Webpack5
Loader
前端
打包工具
webpack5
学习笔记-3 打包优化的操作
一、打包环境区分优化根据打包环境,写三个webpack配置文件webpack.comm.js,webpack.dev.js,webpcak.prod.js,然后通过webpack-merge包来进行合并把公共的配置放在common文件,然后把开发环境和生产环境里的放在各自的文件npmiwebpack-merge-D自己写个用node的path模块处理路径的js,paths.jsconstpath=
Marst_0803
·
2023-08-29 18:09
webpack
webpack5
plugins
作用比起loader处理确定类型的文件,plugins具有更广阔的作用,比如bundle优化、资源管理、注入环境变量等。相较于同种loader一般只添加一次,plugins可以多次添加相同插件根据不同目的。基本定义插件是一个具有apply方法的类,apply方法会被webpackcompiler调用,并且在整个编译生命周期都可以访问compiler对象constpluginName='Consol
神奇大叔
·
2023-08-29 18:38
webapck
webpack
javascript
前端
webpack5
16 自定义plugin, react脚手架
tapable听过阅读webpack的源码可以知道webpack有两个很重要的对象,一个是complier,一个是compilation,他们通过注入的方式来监听webpack的所有声明周期,插件的注入离不开hooks,而他们的hook也都是创建了tapable的各种hook实例而已。Tapable是管理者需要的hook,这些hook可以被应用到我们的插件中。这个tapable给我们提供的hook
coderlin_
·
2023-08-29 18:08
webpack
速学
Webpack5
- Plugin
前言插件能够完成webpack本身不具有的功能。它的使用一般是在webpack的配置信息plugins选项中指定。在上一章中,打包后需要我们手动把打包的js文件引入到html中去。其实我们可以通过html-webpack-plugin插件实现自动生成html文件和引入js的功能。html-webpack-plugin1.安装npm i html-webpack-plugin -D2.配置html-
嘴角邪恶的弧线
·
2023-08-29 18:08
javascript
webpack5
学习(七):减少代码体积
一、BabelBabel为编译的每个文件都插入了辅助代码,使代码体积过大!Babel对一些公共方法使用了非常小的辅助代码,比如_extend。默认情况下会被添加到每一个需要它的文件中。可以将这些辅助代码作为一个独立模块,来避免重复引入。@babel/plugin-transform-runtime:禁用了Babel自动对每个文件的runtime注入,而是引入@babel/plugin-transf
激洪
·
2023-08-29 18:38
前端学习
webpack5
学习
javascript
webpack
Webpack5
学习笔记(基础篇四)——Plugins插件
1、Plugins作用Webpack中另一个非常重要的功能是Plugins,我们称之为插件。插件(Plugins)是用来拓展webpack功能的,它们会在整个构建过程中生效,执行相关的任务。2、Plugins和Loaders的区别有个题外话,在webpack中还有一个概念,那就是loaders,这两个次经常被用来做对比,我也常常弄混,但是他们是完全两个不同的东西。Loaders(加载器):是在打包
老Chen先生
·
2023-08-29 18:37
Webpack
webpack
javascript
前端
详细介绍
Webpack5
中的Plugin
Plugin的作用插件Plugin可以扩展webpack,加入自定义的构建行为,使webpack可以执行更广泛的任务,拥有更强的构建能力。Plugin的工作原理webpack就像一条生产线,要经过一系列处理流程后才能将源文件转换成输出结果。这条生产线上的每个处理流程的职责都是单一的,多个流程之间有存在依赖关系,只有完成当前处理后才能交给下一个流程去处理。插件就像是一个插入到生产线中的一个功能,在特
若年封尘
·
2023-08-29 18:07
前端
#
Webpack
Webpack5
Plugin
打包
前端
webpack5
基本概念 —— 插件(plugin)
插件是webpack的支柱功能。Webpack自身也是构建于在webpack配置中用到的相同的插件系统之上!插件目的在于解决loader无法实现的其他事。如果在插件中使用了webpack-sources的package,请使用require('webpack').sources替代require('webpack-sources'),以避免持久缓存的版本冲突。webpack插件是一个具有apply
*且听风吟
·
2023-08-29 18:07
webpack
webpack
万字长文详解
Webpack5
高级优化
本文从4个角度对webpack和代码进行了优化:1.提升开发体验使用SourceMap让开发或上线时代码报错能有更加准确的错误提示。2.提升打包构建速度使用HotModuleReplacement让开发时只重新编译打包更新变化了的代码,不变的代码使用缓存,从而使更新速度更快。使用OneOf让资源文件一旦被某个loader处理了,就不会继续遍历了,打包速度更快。使用Include/Exclude排除
若年封尘
·
2023-08-29 18:37
前端
#
Webpack
前端
打包工具
webpack5
优化
高级
初次使用Nuxt3脚手架遇见的问题
支持开发中热模块替换和生产环境代码打包(Nuxt支持
webpack5
和Vite)。兼容旧版浏览器,支持最新的JavaScript语法转译(Nuxt使用esbuild)。
阿泽不会飞
·
2023-08-29 14:26
报错
Nust.js
报错
SSR
「
Webpack5
源码」make阶段(流程图)分析
本文内容基于webpack5.74.0版本进行分析
webpack5
核心流程专栏共有5篇,使用流程图的形式分析了
webpack5
的构建原理:「
Webpack5
源码」make阶段(流程图)分析「
Webpack5
·
2023-08-29 14:53
webpack5
优化产出代码
webpack产出代码做性能优化的效果无非是下面三种效果:体积更小合理分包,不重复加载速度更快、内存使用更少下面将通过介绍以下方案来达到以上目的:小图片使用base64编码:url-loaderbundle加hash:应用缓存使用import懒加载模块使用splitChunks提取公共组件使用IgnorePlugin忽略无用的模块使用CDN加速:添加publicPath使用production模式
miao8862
·
2023-08-29 08:37
webpack5
优化构建速度
下面会以这些方面来说明如何优化构建速度:优化babel-loader:使用include或exclude来缩小查找范围使用cacheDirectory来设置缓存避免引入无用的模块:webpack.IgnorePlugin避免重复打包:module.noParse开启多进程打包:happypack多进程压缩js:webpack-parallel-uglify-plugin自动更新和热更新(仅适合开发
miao8862
·
2023-08-27 12:00
webpck5.x内置plugins和loaders
webpack5
版本内置了terser-webpack-plugin的配置webpackv5自带最新的terser-webpack-pluginwebpack5内置了cache模块后可弃用cache-loaderwebpack5.0
海豚先生的博客
·
2023-08-27 07:52
上一页
1
2
3
4
5
6
7
8
下一页
按字母分类:
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
其他