Webpack5

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

Vue和React的运行时，校验引入包的上下文差异

背景系统使用webpack5模块联邦实现微前端，有关如何实现跨应用的代码共享，可参考如何优雅的实现跨应用的代码共享里的第三大点。
C澒·2023-12-23 08:44

重学webpack5(基础篇)

1.Whatiswebpack?我们在学习一门新的技术之前，需要事先了解你学习的是一个什么，为什么要学习它，掌握了它给我们带了什么帮助可以为我们做哪些事情，接下来让我们认识一下webpack。百度百科解释：webpack是代码编译工具，有入口、出口、loader和插件。webpack是一个用于现代JavaScript应用程序的静态模块打包工具。当webpack处理应用程序时，它会在内部构建一个依赖
A-dark-horse·2023-12-22 02:07

Webpack5

一、Webpack基础打包工具：将框架（React、Vue）,ES6，Less/Sass等语法编译成浏览器能识别的JS、CSS；压缩代码、兼容性处理、提升代码性能等。一、entry(入口)指示Webpack从哪个文件开始打包二、output(输出)指示Webpack打包完的文件输出到哪里去，如何命名等三、loader(加载器)webpack本身只能处理JS、JSON等资源，其他资源需要借助load
Zaralike·2023-12-20 21:03

前端打包工具之Webpack5

前端打包工具之Webpack5什么是打包工具打包工具的作用常见的打包工具一、Webpack1、什么是[webpack](https://webpack.docschina.org/concepts/)2
原谅我很悲·2023-12-18 22:02

打包HTML

结合之前的webpack打包，对HTML进行相对应的打包1.在浏览器打开npm搜索html—webpack—插件2.下划找到lnstall复制webpack5里的第一句到终端3.下滑找到用法配置脚本语言
W晚睡W·2023-12-15 21:23

Error: Cannot find module ‘vue/compiler-sfc‘

用的是webpack5,把vue-loader改为较低版本即可，太低也会报错，在package.json中将vue-loader版本修改为14.0.0后，执行npminstall,再编译就可以成功了。
猪猪在天·2023-12-15 21:30

webpack5去除所有console.log（terser-webpack-plugin去除）

可以使用terser-webpack-plugin的terserOptions的compress属性，将console.log设置为false即可。具体如下：constTerserPlugin=require('terser-webpack-plugin');module.exports={optimization:{minimizer:[newTerserPlugin({terserOption
前端老实人·2023-12-15 10:09

terser-webpack-plugin的使用:删除注释和console

中有的插件的版本注释会视为漏洞，需要删除这些注释注意：webpack4中用到terser-webpack-plugin压缩插件，不能使用最新的版本，而是[email protected]版本；webpack5
有蝉·2023-12-15 09:05

基于 Webpack5 Module Federation 的业务解耦实践

前言本文中会提到很多目前数栈中使用的特定名词，统一做下解释描述dt-common：每个子产品都会引入的公共包(类似NPM包)AppMenus：在子产品中快速进入到其他子产品的导航栏，统一维护在dt-common中，子产品从dt-common中引入Portal：所有子产品的统一入口APP_CONF：子产品的一些配置信息存放背景由于迭代中，我们有很多需求都是针对AppMenus的，这些需求的生效需要各
快乐非自愿·2023-12-15 09:31

解决react启动服务时source-map-loader插件报错找不到源文件“index.ts“的源映射文件

webpack5:Failedtoparsesourcemapfrom“**********”如下图所示:Thesourcemapfileslinkstothesrc/-folderthatisnotdistributed
kuilaurence·2023-12-14 17:34

webpack 打包前端项目

我的理解：按照模块之间的依赖，打包所有的静态资源webpack5大核心概念：1.入口：entry2.出口：outp
2301_78550817·2023-12-06 09:06

webpack5 基础知识篇

webpack5基础知识篇一级目录二级目录三级目录一、webpack是什么？
小钱999·2023-12-05 09:58

使用webpack5搭建vue3脚手架

1、项目初始化npminit-y//创建package.json仿照官方脚手架创建好项目的目录结构，router和views文件夹可以不用加2、项目的打包配置const{Configuration}=require('webpack')constpath=require('path')constos=require('os')constHtmlWebpackPlugin=require('html
胡同学ou·2023-12-03 23:05

通过Webpack5 手动搭建一个 Vue3.x + typescript 开发环境

目录前言项目初始化集成babel集成样式处理js集成到页面配置开发服务器配置清除打包文件集成TypeScript集成Vue3前言官方已经存在Vue3.x脚手架，完全没有必要使用手动搭建，当然这里手动搭建只是加深对技术的理解，再使用其基础上，了解部分背后原理，这样才可以在具体的业务逻辑中活灵活现的运用其知识点。项目初始化第一步:初始化package.jsonnpminit-y第二步:安装webpac
敢敢-李·2023-11-30 05:45

Webpack5开发环境下webpack-dev-server-client-overlay

背景：使用webpack5.7启动项目后遇到错误信息，会有一个iframe遮住整个页面解决方式：配置devServer中overlay为falsedevServer:{client:{progress:true,overlay:false,},},
pg_li·2023-11-29 21:43

webpack如何处理文件、图片

webpack5之前是通过，file-loader、raw-loader、url-loader处理文件webpack5是通过使用资源模块类型（assetmoduletype）处理文件资源模块类型(assetmoduletype
QAEARQ·2023-11-29 14:31

webpack5初始化项目（简单版）

目录1.初始化生成package.json文件2.创建项目目录3.安装webpackwebpack-cli4.安装html-webpack-plugin5.安装webpack-dev-server6.webpack.config.js配置7.运行webpack8.浏览器打开http://localhost:8080/9.测试代码1.初始化生成package.json文件npminit-y项目目录：
volodyan·2023-11-29 01:25

续 webpack5的热更新

什么是热更新?不知道大家以前开发是否遇到下面的问题?每次在网页设置好样式之后都要手动的去刷新页面,我们添加的样式才会显示在页面上.热更新就是:当我们把样式保存好之后,切换到我们的页面,不需要刷新它就已展示出我们设置好的样式了,这样就方便,又提升了我们的工作效率.换言之热更新就是帮我们自动的刷新了浏览器.让我们省去区了刷新浏览器动作.热更新：新代码生效，网页不刷新，状态不丢失什么是模块热替换模块热替
皮卡砖·2023-11-28 05:20

【webpack5】webpack-dev-server 热更新不能自动刷新浏览器

【webpack5】webpack-dev-server热更新不能自动刷新浏览器一、问题配置了热更新，但是不会自动刷新页面//webpack.dev.config.js{devServer:{progress
小笼包是馒头·2023-11-28 05:50

奇舞周刊第 340 期：前端进阶十日谈

已star~从构建进程间缓存设计谈Webpack5优化和工作原理本文介绍了Webpack5最令人期待的“长效缓存”功能的前世今生，技术背景以及落地方案。以及Webpack整体构建流程。
奇舞周刊·2023-11-27 09:06

Webpack5 process is not defined

webpack5升级后，出现了一个错误导致process没有定义，那如何解决这个问题呢？
优资园·2023-11-27 04:03

webpack5打包图片

webpack加载图片下载file-loadernpminstall--save-devfile-loaderindex.html起步-->-->index.js导入图片，并加载到也页面中需要注意的是，webpack默认无法识别图片资源，只能通过file-loader进行配置import_from'lodash'//导入css文件import'./index.css'//导入照片importmao
、昔年·2023-11-25 12:56

webpack5图片压缩-image-webpack-loader插件

一，常规webpack打包的配置我们通常会设置大图片打包出来，小图片转成base64的形式进行webpack进行打包。具体设置见这篇文章的第七节：https://blog.csdn.net/weixin_42349568/article/details/124370794现在有个项目就是这样配置的，想要先将图片进行压缩，然后再执行这个打包策略。二，安装image-webpack-loader这个插
笑道三千·2023-11-25 12:55

第三章 webpack5处理图片资源

  在过去webpack4中处理图片采用的loader是file-loader和url-loader,可能还有image-webpack-loader进行处理图片。file-loader:在css和html主页中，相对路径的图片都会被处理，发布到输出目录中url-loader:是对file-loader的封装，因此在安装了file-loader和url-loader后，在webpack.confi
天界程序员·2023-11-25 12:20

Webpack常用的压缩，CSS，JS，图片

webpack5单独提取css文件，兼容处理及压缩（四)webpack提取图片文件打包压缩文章目录前言JavaScript压缩terser-webpack-pluginCSS压缩OptimizecssAssetswebpackPlugin
不见浅诗～·2023-11-25 12:16

webpack5搭建vue环境

webpack5搭建vue环境0.前言安装webpack、webpack-cli【开始我是全局安装进行测试，后期项目中最好用局部安装，不同项目使用的版本不同】熟悉npm基本命令确保npm可以使用1.webpack
专注的老咪·2023-11-25 12:52

第十九章 webpack5项目搭建Vue-Cli(合并配置)

对于开发环境的配置和生产环境的配置，有大部分代码配置是重复的，因此我们希望将配置合并减少代码体积。对于Vue-Cli的合并配置，我们使用webpack.prod.js进行改造。step1–判断环境类型对于什么时候是开发环境，什么时候是生产环境，我们可以通过process.env.NODE_ENV的值来判断。//需要通过cross-env定义环境变量constisProduction=process
天界程序员·2023-11-25 12:52

【踩坑】webpack使用hard-source-webpack-plugin报错

原因在搜索解决方法时看到网上说的是这个插件能正常使用的版本是webpack5以下的版本。所以5以上的版本就会报错。毕竟现在新项目基本都是5版本了解决方案1、添加子配置这个方法是在该插件github
于离别之朝束起约定之花·2023-11-20 14:26
上一页 1 2 3 4 5 6 7 8 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他