升级webpack5的踩坑记录

最新推荐文章于 2024-07-25 20:56:39 发布
最新推荐文章于 2024-07-25 20:56:39 发布
阅读量1k 收藏
点赞数
分类专栏： webpack 文章标签： webpack 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u011435776/article/details/114700463
版权
本文记录了从Webpack4到Webpack5的升级过程，详细描述了在升级中遇到的html-webpack-plugin插件版本不匹配问题，以及解决该问题后的性能提升，包括打包时间减少了77ms。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

升级webpack5的踩坑记录

官方说明

文档地址

地址：https://webpack.js.org/
中文地址： https://www.webpackjs.com/

升级方式

npm install --save-dev webpack

踩坑记录

使用html-webpack-plugin插件报错

插件报错
插件版本不符，需要进行升级。
npm uninstall html-webpack-plugin
npm i html-webpack-plugin -D

对比

4.46.0
v4.46.0
5.25.0
5.25.0
打包同一个代码，打包时间减少了77ms，打包速度有一定的提升。

最低0.47元/天 解锁文章
craco + webpack 4 升 5
harrry的博客
12-04 1283
craco 升级 webpack 5 踩坑
vue-cli2升级webpack4记录
jean850218的博客
03-26 1396
目录结构分析，找出配置文件 这个项目是由vue-cli2生成的，我们先来看看现有的目录结果，找出我们需要改代码的地方，打开各文件查看，找到我们需要修改文件的地方存于放build和config两个目录下： 这次我们修改的js文件主要有以下三个： ./build/webpack.dev.conf.js ./build/webpack.prod.conf.js ./config/webpa...
Webpack5升级踩坑记
coco723的博客
12-20 613
1. 开启hot: true但是热更新无效 解决需要兼容webpack5.X module.exports = { target: 'web', // webpack5.x 加上之后热更新才有效果 } 2. 如果使用了mini-css-extract-plugin插件（将样式以link的形式引入而不是style标签引入），则样式的热更新无效 解决：需要判断开发模式使用style注入的形式，否则使用link引用的形式 // webpack.common.js // 是否开发者模式 const devM
webpack5 踩坑日记（持续更新~~）
小R.的博客
12-06 2111
文章目录前言一、打包图片资源时问题1：问题2：二、启动devServer指令更改为：npx webpack serve三、 前言   最近跟着视频想详细学一下webpack，因为我下载的是最新版，webpack5，视频里是webpack4，难免遇到一些视频里没问题我这里报错的情况，现总结一下。 一、打包图片资源时 问题1： 在 output 加上 publicPath:’./’，否则会报错，应该是版本问题 publicPath:'./' 问题2： 下面这个问题用webpack版本5不会出现，应该是被解
webpack5打包原理及应用（插件篇）
weixin_46248051的博客
04-06 1740
webpack5打包原理及应用（插件篇） 概念: loader：通常用来完成非JavaScript模块的转化成webpack能处理的模块； plugin：能够完成更多定制化操作的插件 🚀 如果想要插件起作用，需要在webpack.config.js中的 plugins 数组中进行实例的传递 // webpack.config.js基础配置 const path = require('path') module.exports = { entry: './src/main.js', ou
script-ext-html-webpack-plugin webpack插件做监控插入
gwdgwd123的博客
01-29 3777
script-ext-html-webpack-plugin webpack插件做监控插入
webpack5基本配置及html-webpack-plugin和webpack-dev-server使用（二）
茉莉蜜茶~~~
12-03 2025
1、初始化 npm init，生成package.json文件 2.安装 npm webpack webpak-cli html --save-dev （ --save-dev开发过程中需要使用的一些文件，在项目最终运行时是不需要的,简写-D，将模块名和版本号添加到devDependencies部分） (–save 在线上环境运行时会将包安装，将模块名和版本号添加到dependencies部分) 3.创建webpack.config.js 3.1基本配置 const path = require('pat
vite构建vue3项目hmr不生效问题踩坑记录
最新发布
jieyucx的博客
07-25 1718
关于热更新不生效问题，我查询了很多，有以下几点可能导致vite的hmr不生效（在Vite构建的Vue 3项目中，如果HMR（热模块替换）不生效，可能由多种原因导致。
vue2.x 项目 webpack升级vite避坑总结
var_deng的博客
09-26 6548
前言 目前一个用webpack构建的vue2.X 项目由于业务扩展越来越大，导致项目在本地编译时热更新很慢，页面更新需要10几秒以上。为提高团体开发速度和效率，最近打算把底部打包构建的环境由webpack迁移为vite。 为什么 Vite 启动这么快 底层实现上， Vite 是基于 esbuild 预构建依赖的 esbuild 使用 go 编写，并且比以 js 编写的打包器预构建依赖, 快 10 - 100 倍。 因为 js 跟 go 相比实在是太慢了，js 的一般操作都是毫秒计，go 则是纳秒
Webpack基本配置及常用插件
梅西上身的博客
03-14 1990
基础版 webpack 配置
【前端】webpack5的配置及基本使用
小绵杨
09-05 1193
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。在最原始的前端开发中，我们引入js和css等文件都是通过手动地在html中插入script和link标签来达到引用的目的，不仅繁琐，每个文件都需要单独发一次请求，而且容易发生变量冲突的问题。于是提出了JavaScript模块化的概念，依次出现了AMD、CommonJS、CMD、ES6模块化等解决方案。
webpack5-[html-webpack-plugin]的使用
SevenSongyun的博客
12-31 2196
webpack5-[html-webpack-plugin]的使用 一、为什么要用 html-webpack-plugin 插件，这个插件有什么用？ html-webpack-plugin 插件可以在内存中生成 html 文件 html-webpack-plugin 插件可以在生成的文件中自动帮我们导入合适的js文件 二、步骤 初始化 npm init -y 安装 npm i webp...
webpack常用配置
weixin_30868855的博客
10-16 254
1.加载CSS 命令行输入 npm install --save-dev style-loader css-loader webpack.config.js配置如下 const path = require('path'); module.exports = { entry: './src/index.js', output: { filename: 'bund...
03-webpack5学习-常用插件html-webpack-plugin
纯黑色山羊
06-13 591
webpack常用插件html-webpack-plugin
Webpack5 htmlwebpackplugin用法
有趣的小良的博客
10-13 1664
Webpack是一个功能强大的模块打包工具，而HtmlWebpackPlugin是Webpack的一个插件，用于生成HTML文件并自动注入打包后的资源。介绍了Webpack5中HtmlWebpackPlugin插件的用法及其各种配置选项。借助HtmlWebpackPlugin插件，我们可以方便地生成HTML文件并自动注入打包后的资源，同时还能对HTML进行压缩和定制化配置。
webpack 版本冲突详细原因分析及解决办法
weixin_45509705的博客
07-20 5649
本项目使用vue/cli-4构建，在安装完less-loader后，npm run serve 时候报错，原因是webpack版本冲突 报错信息 Error: Rule can only have one resource source (provided resource and test + include + exclude) in { “exclude”: [ null ], “use”: [ { “loader”: “/Users/truezir_tech_team/WebstormProject
webpack打包关于插件的坑
chendf__的博客
04-25 744
compression-webpack-plugin 插件文档 安装使用 compression-webpack-plugin 插件对文件进行压缩 npm i compression-webpack-plugin 使用 const CompressionPlugin = require('compression-webpack-plugin') // ... module.exports = { // ... configureWebpack: config => { config.
npm安装compression-webpack-plugin插件报错问题记录
热门推荐
刘先森
03-10 2万+
文章目录问题再现解决方案总结 问题再现 因项目需要，在前端项目中安装compression-webpack-plugin插件 运行npm install compression-webpack-plugin命令之后在package.json文件中已经出现了"compression-webpack-plugin": "^7.1.2"这个依赖项 运行npm run serve命令启动项目，报错信息如下： ERROR Error: Rule can only have one resource sou
html-webpack-plugin和ScriptExtHtmlWebpackPlugin这两个插件有什么区别
m0_37111190的博客
09-17 2415
它允许您将JS文件分为不同的块（chunk）并在HTML文件中按需引入，以加快页面的加载速度。它允许您指定哪些JS文件是内联的，哪些是外部引用的。html-webpack-plugin是一个用于生成HTML文件的插件，它可以将打包后的文件自动注入到HTML模板中，并生成一个新的HTML文件。它可以通过配置生成多个HTML文件，并且可以配置生成的文件的模板和输出路径等。html-webpack-plugin用于生成HTML文件，而ScriptExtHtmlWebpackPlugin则用于管理JS文件的加载。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值