webpack5

Webpack5中使用file-loader和url-loader打包图片

在Webpack5之前，加载资源需要使用一些loader，比如raw-loader、url-loader、file-loader；从Webpack5开始，我们可以直接使用资源模块类型(assetmoduletype
彭宏豪·2024-01-30 17:29

webpack5快速搭建HTML项目

webpack5快速搭建HTML项目基础环境搭建webpack配置（区分开发和生产）补充：NodeJs相关知识点基础环境搭建快速初始化项目，并生成一个package.json文件：yarninit-y安装
weiweivita·2024-01-29 22:27

webpack5快速搭建Vue3项目

webpack5快速搭建Vue3项目基础环境搭建安装依赖webpack配置文件修改引入Vue基础环境搭建参考webpack5快速搭建HTML项目安装依赖vue：yarnaddvue-Svue-loader
weiweivita·2024-01-29 22:27

【前端工程化】五：webpack5快速入门（二）

webpack-dev-server要实现在开发时修改了文件可以自动编译展示，可以使用webpack的watch属性为true和vscode的liveserver插件，即观察模式//webpack.config.jsmodule.exports={watch:true,...}但是这样做有几个缺点：所有源代码都会重新编译因为我们使用了clean-webpack-plugin插件，所以每次编译成功以
Whoopsina·2024-01-29 15:27

【前端工程化】五：webpack5快速入门（四）

CSS抽离与压缩将Css文件单独提取一个文件中，推荐当css文件大于150kb时在考虑使用该插件，否则会多一次css的请求；开发环境中使用压缩性价比不高，所以一般在生产环境中使用；生产环境下，在loader中配置MiniCssExtractPlugin.loader代替style-loader，在插件中配置MiniCssExtractPlugin的输出路径用于抽离CSS，配置CssMinimize
Whoopsina·2024-01-29 15:27

Webpack5从零开始搭建Vue-cli

先展示搭建好的项目目录：1、创建config文件，包含开发环境配置、生产环境配置以及合并后的webpack.config.js直接展示配置代码：constpath=require("path");constESLintWebpackPlugin=require("eslint-webpack-plugin");constHtmlWebpackPlugin=require("html-webpack
海浪在开花·2024-01-29 08:42

webpack5构建基于Vue3+ElementPlus项目搭建(开发和生产)

项目基于webpack5+vue3+ElementPlus环境构建主要配置文件:package.json插件使用和版本配置等信息.eslintrc.js启用eslint检测代码规范babel.config.jses语法兼容配置config│├─webpack.base.js开发和生产公共配置文件│├─webpack.dev.js开发环境配置│└─webpack.prod.js生产打包环境配置pac
追逐梦想之路_随笔·2024-01-27 17:31

第五章（原理篇） 微前端技术之模块联邦与动态加载

中第二步：编写和暴露模块第三步：在应用2中使用暴露的模块第四步：启动应用动态加载与代码拆分在微前端中的应用案例分析代码示例Webpack的模块联邦与动态加载模块联邦（ModuleFederation）Webpack5
球球不吃虾·2024-01-26 09:41

Webpack5 基本使用 - 3（完结）

环境区分可以定义多个配置文件，通过webpack-merge合并配置文件。安装webpack-mergeyarnaddwebpack-merge公共配置//webpack.common.jsconstpath=require('path')constHtmlWebpackPlugin=require('html-webpack-plugin')module.exports={entry:path.
丶清风不问烟雨·2024-01-24 21:45

Webpack5 基本使用 - 2

常用loaderloader是辅助打包工具。webpack默认只能打包js文件，打包其它模块就需要配置loader来告诉webpack该怎么去打包其它文件。loader可以将文件从不同的语言转换为JavaScript。一类文件如果需要多个loader处理，loader的执行顺序是从后往前。打包样式文件打包csscss文件需要先用css-loader处理，再用style-loader插入标签中。安装
丶清风不问烟雨·2024-01-24 21:42

使用Element-Plus 加载style

vue-chrome-extension简介chrome扩展开发插件基于vue3、ts、ElementPlus、Webpack5、axios、less开发支持content快速调用chrome对象及axios
wyg_031113·2024-01-22 23:03

Webpack5入门到原理21：提升开发体验

SourceMap为什么开发时我们运行的代码是经过webpack编译后的，例如下面这个样子：/**ATTENTION:The"eval"devtoolhasbeenused(maybebydefaultinmode:"development").*Thisdevtoolisneithermadeforproductionnorforreadableoutputfiles.*Ituses"eval(
duansamve·2024-01-21 21:48

Webpack5入门到原理19：React 脚手架搭建

开发模式配置//webpack.dev.jsconstpath=require("path");constESLintWebpackPlugin=require("eslint-webpack-plugin");constHtmlWebpackPlugin=require("html-webpack-plugin");constReactRefreshWebpackPlugin=require("
duansamve·2024-01-21 21:16

Webpack5入门到原理20：Vue 脚手架搭建

开发模式配置//webpack.dev.jsconstpath=require("path");constESLintWebpackPlugin=require("eslint-webpack-plugin");constHtmlWebpackPlugin=require("html-webpack-plugin");const{VueLoaderPlugin}=require("vue-load
duansamve·2024-01-21 11:32

Webpack5入门到原理17：Loader 原理

loader概念帮助webpack将不同类型的文件转换为webpack可识别的模块。loader执行顺序分类pre：前置loadernormal：普通loaderinline：内联loaderpost：后置loader执行顺序4类loader的执行优级为：pre>normal>inline>post。相同优先级的loader执行顺序为：从右到左，从下到上。例如：//此时loader执行顺序：loa
duansamve·2024-01-21 11:17

Webpack5入门到原理15：提取 Css 成单独文件

提取Css成单独文件Css文件目前被打包到js文件中，当js文件加载时，会创建一个style标签来生成样式这样对于网站来说，会出现闪屏现象，用户体验不好我们应该是单独的Css文件，通过link标签加载性能才好1.下载包npmimini-css-extract-plugin-D2.配置webpack.prod.jsconstpath=require("path");constESLintWebpac
duansamve·2024-01-21 10:47

Webpack5入门到原理18：Plugin 原理

Plugin的作用通过插件我们可以扩展webpack，加入自定义的构建行为，使webpack可以执行更广泛的任务，拥有更强的构建能力。Plugin工作原理webpack就像一条生产线，要经过一系列处理流程后才能将源文件转换成输出结果。这条生产线上的每个处理流程的职责都是单一的，多个流程之间有存在依赖关系，只有完成当前处理后才能交给下一个流程去处理。插件就像是一个插入到生产线中的一个功能，在特定的时
duansamve·2024-01-21 05:40

Webpack5入门到原理6：处理图片资源

处理图片资源过去在Webpack4时，我们处理图片资源通过file-loader和url-loader进行处理现在Webpack5已经将两个Loader功能内置到Webpack里了，我们只需要简单配置即可处理图片资源
duansamve·2024-01-21 05:39

Webpack5入门到原理25：总结

我们从4个角度对webpack和代码进行了优化：提升开发体验使用SourceMap让开发或上线时代码报错能有更加准确的错误提示。提升webpack提升打包构建速度使用HotModuleReplacement让开发时只重新编译打包更新变化了的代码，不变的代码使用缓存，从而使更新速度更快。使用OneOf让资源文件一旦被某个loader处理了，就不会继续遍历了，打包速度更快。使用Include/Excl
duansamve·2024-01-21 01:42

Webpack5入门到原理23：减少代码体积

TreeShaking为什么开发时我们定义了一些工具函数库，或者引用第三方工具函数库或组件库。如果没有特殊处理的话我们打包时会引入整个库，但是实际上可能我们可能只用上极小部分的功能。这样将整个库都打包进来，体积就太大了。是什么TreeShaking是一个术语，通常用于描述移除JavaScript中的没有使用上的代码。注意：它依赖ESModule。怎么用Webpack已经默认开启了这个功能，无需其他
duansamve·2024-01-21 01:41

Webpack5入门到原理24：优化代码运行性能

优化代码运行性能CodeSplit为什么打包代码时会将所有js文件打包到一个文件中，体积太大了。我们如果只要渲染首页，就应该只加载首页的js文件，其他文件不应该加载。所以我们需要将打包生成的文件进行代码分割，生成多个js文件，渲染哪个页面就只加载某个js文件，这样加载的资源就少，速度就更快。是什么代码分割（CodeSplit）主要做了两件事：分割文件：将打包生成的文件进行分割，生成多个js文件。按
duansamve·2024-01-21 01:11

Webpack5入门到原理22：提升打包构建速度

HotModuleReplacement为什么开发时我们修改了其中一个模块代码，Webpack默认会将所有模块全部重新打包编译，速度很慢。所以我们需要做到修改某个模块代码，就只有这个模块代码需要重新打包编译，其他模块不变，这样打包速度就能很快。是什么HotModuleReplacement（HMR/热模块替换）：在程序运行中，替换、添加或删除模块，而无需重新加载整个页面。怎么用基本配置module
duansamve·2024-01-21 01:11

Webpack5入门到原理2：基本使用

Webpack是一个静态资源打包工具。它会以一个或多个文件作为打包的入口，将我们整个项目所有文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件，就可以在浏览器段运行了。我们将Webpack输出的文件叫做bundle。功能介绍Webpack本身功能是有限的:开发模式：仅能编译JS中的ESModule语法生产模式：能编译JS中的ESModule语法，还能压缩JS代码开始使用1.资源目录w
duansamve·2024-01-20 07:57

Webpack5入门到原理3：基本配置

在开始使用Webpack之前，我们需要对Webpack的配置有一定的认识。5大核心概念entry（入口）指示Webpack从哪个文件开始打包output（输出）指示Webpack打包完的文件输出到哪里去，如何命名等loader（加载器）webpack本身只能处理js、json等资源，其他资源需要借助loader，Webpack才能解析plugins（插件）扩展Webpack的功能mode（模式）主
duansamve·2024-01-20 07:57

Webpack5入门到原理5：处理样式资源

处理样式资源我们学习使用Webpack如何处理Css、Less、Sass、Scss、Styl样式资源介绍Webpack本身是不能识别样式资源的，所以我们需要借助Loader来帮助Webpack解析样式资源我们找Loader都应该去官方文档中找到对应的Loader，然后使用官方文档找不到的话，可以从社区Github中搜索查询Webpack官方Loader文档处理Css资源1.下载包npmicss-l
duansamve·2024-01-20 07:57

Webpack5入门到原理1：前言

为什么需要打包工具？开发时，我们会使用框架（React、Vue），ES6模块化语法，Less/Sass等css预处理器等语法进行开发。这样的代码要想在浏览器运行必须经过编译成浏览器能识别的JS、Css等语法，才能运行。所以我们需要打包工具帮我们做完这些事。除此之外，打包工具还能压缩代码、做兼容性处理、提升代码性能等。有哪些打包工具？GruntGulpParcelWebpackRollupVite.
duansamve·2024-01-20 07:56

Webpack5入门到原理11：处理 js 资源

有人可能会问，js资源Webpack不能已经处理了吗，为什么我们还要处理呢？原因是Webpack对js处理是有限的，只能编译js中ES模块化语法，不能编译其他语法，导致js不能在IE等浏览器运行，所以我们希望做一些兼容性处理。其次开发中，团队对代码格式是有严格要求的，我们不能由肉眼去检测代码格式，需要使用专业的工具来检测。针对js兼容性处理，我们使用Babel来完成针对代码格式，我们使用Eslin
duansamve·2024-01-20 07:53

Webpack5入门到原理9：处理字体图标资源

1.下载字体图标文件打开阿里巴巴矢量图标库选择想要的图标添加到购物车，统一下载到本地2.添加字体图标资源src/fonts/iconfont.ttfsrc/fonts/iconfont.woffsrc/fonts/iconfont.woff2src/css/iconfont.css/注意字体文件路径需要修改src/main.jsimport{add}from"./math";importcount
duansamve·2024-01-20 03:03

Webpack5入门到原理12：处理 Html 资源

1.下载包npmihtml-webpack-plugin-D2.配置webpack.config.jsconstpath=require("path");constESLintWebpackPlugin=require("eslint-webpack-plugin");constHtmlWebpackPlugin=require("html-webpack-plugin");module.expo
duansamve·2024-01-20 01:46

Webpack5入门到原理13：开发服务器&自动化

每次写完代码都需要手动输入指令才能编译代码，太麻烦了，我们希望一切自动化1.下载包npmiwebpack-dev-server-D2.配置webpack.config.jsconstpath=require("path");constESLintWebpackPlugin=require("eslint-webpack-plugin");constHtmlWebpackPlugin=require
duansamve·2024-01-20 01:46

Webpack5入门到原理14：生产模式介绍

生产模式是开发完成代码后，我们需要得到代码将来部署上线。这个模式下我们主要对代码进行优化，让其运行性能更好。优化主要从两个角度出发:优化代码运行性能优化代码打包速度生产模式准备我们分别准备两个配置文件来放不同的配置1.文件目录├──webpack-test(项目根目录)├──config(Webpack配置文件目录)│├──webpack.dev.js(开发模式配置文件)│└──webpack.p
duansamve·2024-01-20 01:46

Webpack5入门到原理7：修改输出资源的名称和路径

1.配置constpath=require("path");module.exports={ entry:"./src/main.js", output:{  path:path.resolve(__dirname,"dist"),  filename:"static/js/main.js",//将js文件输出到static/js目录中 }, module:{  rules:[   {    //
duansamve·2024-01-20 01:44

【webpack5修行之道】第15篇：性能优化-多进程打包

上一篇：【webpack5修行之道】第14篇：性能优化-PWA多进程打包是一把双刃剑，如果使用得当，他会大大提高编译速度，如果使用不当，那么编译速度反而会增加因为thread-loader多线程开启过程需要耗费时间大概为
jay_mw·2024-01-19 04:23

webpack5解决 Invalid options object. Dev Server has been initialized using an options object that...

将contentBase改为static即可devServer:{static:'./dist'),//开发服务器启动路径open:true}同时注意package.json中加上–modexxxx"dev":"webpack-dev-server--modedevelopment","build":"webpack--modedevelopment"}
吕三三·2024-01-11 06:38

搭建React开发环境-webpack实现

webpack版本：webpack5编译器：vscode第一步、新建项目及初始化1）新建项目文件夹可命名为my_webpack2）初始化项目使用命令npminit-y，即可生成package.json文件夹
梦幻通灵·2024-01-08 07:30

webpack5新特性

此版本重点关注以下内容:通过持久缓存提高构建性能.使用更好的算法和默认值来改善长期缓存.通过更好的树摇和代码生成来改善捆绑包大小.清除处于怪异状态的内部结构，同时在v4中实现功能而不引入任何重大更改.通过引入重大更改来为将来的功能做准备，以使我们能够尽可能长时间地使用v5.下载npmiwebpack@nextwebpack-cli-D自动删除Node.jsPolyfills早期，webpack的目
热心市民萝卜先生·2024-01-08 03:12

webpack3，webpack4，webpack5的区别

文章目录webpack3webpack4webpack5总结webpack逆向案例js逆向中经常会遇到webpack打包过的js代码，不同的版本，打包的结果也存在差异。先简单理解一下webpackwebpack中每个模块有一个唯一的id，是从0开始递增的。整个打包后的bundle.js是一个匿名函数自执行。参数则为一个数组。数组的每一项都为个function。function的内容则为每个模块的执
我是花臂不花·2024-01-07 07:57

Webpack5 搭建一个简易的 React+TS 开发环境

Webpack5搭建一个简易的React+TS开发环境.png之前入行前端系统学习过Webpack，那时候的版本是4，当时对Webpack的印象就是简单，但绝不易上手，尤其是应用到项目中，各种插件眼花缭乱
CondorHero·2024-01-07 05:12

总结万字长文笔记webpack5打包资源优化

webpack如何打包资源优化你有了解吗？或者一个经常被问的面试题，首屏加载如何优化，其实无非就是从http请求、文件资源、图片加载、路由懒加载、预请求，缓存这些方向来优化，通常在使用脚手架中，成熟的脚手架已经给你做了最大的优化，比如压缩资源，代码的treeshaking等。本文是笔者根据以往经验以及阅读官方文档总结的一篇关于webpack打包方面的长文笔记，希望在项目中有所帮助。正文开始…在阅读
姑老爷呀·2024-01-06 18:10

Webpack5 常用优化总结

本文主要总结经常用到的一些代码性能优化、减小代码体积、提升webpack打包构建速度等内容的方法。具体的实现可参考webpack官网查看相关示例。注：如果读者还未接触过webpack，请先了解webpack的基本使用。正文：SourceMap----提升开发体验SourceMap源代码映射，是一个用来生成源代码与构建后代码一一映射的文件的方案。使用webpack打包之后会生成一个与打包文件对应的.
聂大哥·2024-01-06 18:38

webpack4 module federation

module-federation是webpack5更新的一项新特性,可以更容易的共享前端代码,本文将介绍@module-federation/webpack-4实现原理及其与webpack5的差异背景在公司内我们搭建了微前端包管理平台
zhanghongen1·2024-01-05 09:52

在 vue/cli 中使用 Module Federation

webpack5的新特性，分模块共同开发。多个独立的构建可以组成一个应用程序，这些独立的构建之间不应该存在依赖关系，因此可以单独开发和部署它们。这通常被称作微前端，但并不仅限于此。
文摘资讯·2024-01-05 09:21

webpack5配置vue.config.js文件时出现的一些报错

报错Componentnamexxxshouldalwaysbemulti-word解决方法：在vue.config.js中设置lintOnSave:falsewebpack{if(!devServer){thrownewError('webpack-dev-serverisnotdefined');}mockServer(devServer.app)returnmiddlewares;},},}
壮壮仔儿·2023-12-31 05:49

《基于 Vue 组件库 的 Webpack5 配置》- 总结

前言Vue2项目升级到Webpack5后，相关的配置也有所变化！
AvatarGiser·2023-12-30 08:24

《Webpack5 升级》- Vue2.x 组件库 Webpack3 升 5

前言基于Vue2.x的项目和组件库开发于2019年，那时对Webpack版本没有概念，项目和组件库的版本混乱…有的使用v3，有的使用v4…对于现今2023年（或2024年）的整个生态环境是不够用的，无法使用较新和更优秀的插件。所以升级势在必行！注意本篇是基于Vue2.x组件库的升级，如果想了解基于Vue2.x项目的升级。请移步《Vue2.x项目Webpack4升级5（半自动升级）》实现升级pack
AvatarGiser·2023-12-29 08:52

webpack升级后发现-webkit-box-orient 属性 丢失

原因：升级webpack5后webpack认为-webkit-box-orient是过时属性，所以被autoprefixer给杀掉了，所以浏览器css里就没有显示这个属性目前的解决方法添加/*autoprefixer
姝光·2023-12-29 02:14

实践：原有前端项目升级到webpack5

目前，公司的前端的技术栈是React,前端项目从第三方框架的使用上来说，分为三类：a.没有用第三方b.nextjs+antda.umi+antd(antdpro)升级的工作量以及难度，取决于架构的封装度和灵活度。我们从最简单的开始：1.没有用第三方框架的项目升级这个好说，直接按ModuleFederation项目间组件共享stepbystep这个笔记里来就好了。需要特别一提的是，这时里的commo
hupo256·2023-12-28 13:22

高级篇：webpack应用指南一

介绍提升代码体验SourceMap*提升打包构建速度HRM（热模块替换）【开发环境】oneOf*Include/Exclude*cache*多进程打包*减少代码体积TreeShaking*根据尚硅谷视频教程及webpack5
cd_yang2017·2023-12-26 12:03

CSS自适应分辨率 amfe-flexible 和 postcss-pxtorem：Webpack5 升级后相关插件和配置更新说明

前言项目对应的webpack5版本如下：[email protected]@5.1.4-D升级插件说明一下，我更喜欢固定版本号，这样随机bug会少很多，更可控~npmipostcss-loader
AvatarGiser·2023-12-23 15:11

在webpack5中使用url-loader加载图片显示空白

这个问题真的是太坑了首先我是跟着一个教程学的webpack，但是作者本人用的webpack4，我安装的时候没想到4和5区别这么大，js打包没有问题，样式打包也没有问题，但是在样式里引入图片时，图片打包后显示异常，没有报图片地址404，也没有出现网上很多人出现的[objectobject]问题。图片获取看上去没什么问题，但是链接打开是一个空白的小方格。这个问题大概看了两天了，本来想放弃了，直接把we
Amillly·2023-12-23 14:43
上一页 1 2 3 4 5 6 7 8 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他