webpack 5.0踩坑记

最新推荐文章于 2024-07-15 10:00:00 发布
最新推荐文章于 2024-07-15 10:00:00 发布
阅读量283 收藏
点赞数
分类专栏： 打包 文章标签： webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hexiyuanhecy/article/details/112677126
版权

webpack5 HtmlWebpackPlugin 版本冲突 配置 解决方法
关键词由CSDN通过智能技术生成
  1. Asset Modules 

{
    test: /\.(png|svg|jpg|jpeg|gif)$/i,
    // webpack 5 写法
    // 习惯性写成 use: 'asset/resource'，还眼瞎看不见.............
    type: 'asset/resource'

    // webpack 4 写法
    // use: 'file-loader'
},
  1. HtmlWebpackPlugin

版本不兼容，默认下载的版本为 4.5.x，会报错：TypeError: The 'compilation' argument must be an instance of Compilation

解决方式，更改webpack版本为4.X 但是我搞得就是5.x，肯定不行；改HtmlWebpackPlugin 版本呗

cnpm install html-webpack-plugin@5.0.0-alpha.9

持续更新.............

 

这家伙今天学习了吗
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
升级webpack5的踩坑记录
u011435776的博客
02-15 731
升级webpack5的踩坑记录官方说明文档地址升级方式踩坑记录第一坑：使用html-webpack-plugin插件报错 官方说明 文档地址 地址：https://webpack.js.org/ 中文地址： https://www.webpackjs.com/ 升级方式 npm install --save-dev webpack 踩坑记录 第一坑：使用html-webpack-plugin插件报错 插件版本不符，需要进行升级。 npm uninstall html-webpack-plugin npm
Webpack5 踩坑之（html-webpack-plugin）
vv_bug
02-18 1万+
2021 开工第一天就给我个大大的惊喜。 ERROR in Error: The loader "/home/project/vue3-demo/node_modules/html-webpack-plugin/lib/loader.js!/home/project/vue3-demo/public/index.html" didn't return html. - index.js:339 HtmlWebpackPlugin.evaluateCompilationResult [vu
WebPack5.0 快速入门
最新发布
Java.慈祥
07-15 1781
Webpack是一个强大的静态模块打包工具🧰主要用于现代JavaScript应用程序，它从一个或多个入口点开始，构建一个依赖图，然后将项目中所需的每个模块打包成一个或多个bundle，这些bundle是静态资源，用于展示你的内容；指的是编写代码过程中，htmlcssjs图片、文件🖺等固定内容的资源；把静态模块内容，压缩，整合，转译等…🧊前端工程化；WebPack支持多种模块标准语法把less/sass转成css代码把ES6+降级成ES5Webpack是一个强大的静态模块打包工具🧰主要用于现代。
真学不动了！机器自动写页面，webpack 5.0又要更新
小北哥哥和北妈
03-04 2091
文/北妈阅读本文需要2.8分钟一最近媒体都在说5G，5G时代的来临会对我们生活和现在社会造成的影响。还有开发商在科技展览会，制作了未来模拟5G应用场景的试玩模型，在pc...
webpack 升级5.x遇到的问题
时遇的博客
05-23 1984
webpack 升级5.x遇到的问题 之前的djaongo+vue项目，使用webpack打包，运行正常，但是有段时间未修改，重新运行npm run dev时发现报错，原因是webpack的升级,从v4->v5,需要升级webpack-cli、plugin、loader，以及部分废弃的配置需要升级，在此记录遇到的问题及解决方法。 文章目录webpack 升级5.x遇到的问题项目使用的依赖版本问题及解决方法总结参考博客 项目使用的依赖版本 // package.json { "dependenc
值得你学习的构建工具-Webpack5.0简化版--五大核心概念
qq_56352725的博客
10-19 116
webpack 简化了解
webpack ERROR in TypeError: The ‘compilation‘ argument must be an instance of Compilation
ryyzxf的博客
02-05 388
问题： ERROR in TypeError: The 'compilation' argument must be an instance of Compilation - JavascriptModulesPlugin.js:119 getCompilationHooks [webpack]/[_webpack@5.20.2@webpack]/lib/javascript/JavascriptModulesPlugin.js:119:10 - CommonJsChunkForma
webpack v4+升级v5+ 踩坑笔记
clearNew的博客
07-07 1619
工作中遇到了一个小问题，然后搞了两天，怀疑是webpack的问题，因此升级了现有项目的webpack，webpack v4+ 升级到了 v5， node v12+ 升级到了 node v16+， 本来打算升v17的， 发现和16版本改动不小， 和开发其他项目还得切回了， 索性就降到了v16，因此node升级到v17，要慎重啊！！！.........
craco + webpack 4 升 5
harrry的博客
12-04 1172
craco 升级 webpack 5 踩坑
Vue SSR服务端渲染改造踩坑指南
chen801090的博客
05-07 8572
版本匹配 Vue的SSR渲染，可以当作一个全新的项目，需要安装依赖的模块(node_modules)，可以将原先使用vue cli 3创建的项目的package.json拷贝过来，确保不缺少相关模块，然后在此基础上添加SSR需要的模块。 主要是vue-server-renderer: npm install vue vue-server-renderer --save vue-serv...
这可能是你们都在找的：React 纯原生纯hook多标签微前端
u012736939的博客
05-18 2360
这可能你们都在找的：React 纯原生纯hook多标签微前端 项目地址：https://github.com/X-neuron/antdFront.git     项目特点：     1、采用webpack、babel、antd 等较为原生的配置和函数组件搭建，支持pwa。     2、极简Hox数据流。     3、支持json路由动态配置。
webpack5.0基础配置（全面）
weixin_40756663的博客
03-01 4500
前言 朋友们好我是跑不快的猪，新的一年，新的开始，先预祝各位都有华丽丽的变身。 本篇文章主要进行webpack5.0+版本的配置，在这个脚手架横行的时代，最终还是需要掌握一些基础的配置，对工作、面试、以及各脚手架中webpack的调试都有不小的作用。接下来会一步步的分享我学习配置中的一些坑和心得，需要代码的朋友请直接滑到页面底部。 概念预热 在学习webpack的过程中，有如下几个概念贯穿始终，在开始之前先列出来。掌握了它们虽然不至于事半功倍，但是对一些配置的理解可能会更简单一点。 module（模块）
webpack HtmlWebpackPlugin报错 TypeError: The ‘compilation‘ argument must be an instance of Compilation
前端小白的逆袭
11-24 2979
webpack HtmlWebpackPlugin报错 TypeError: The 'compilation' argument must be an instance of Compilation，webpack5和html-webpack-plugin的版本兼容问题
使用webpack5，手动搭建vue开发环境
qq_44900902的博客
06-14 905
在vue3.x 项目中需要设置两个变量，以更好地进行 tree-shaking修改以上操作是webpack5搭建vue项目环境全过程了，在实际操作的过程中再次熟悉webpack的配置。Webpack 5.0 从零开始搭建 Vue 开发环境手写webpack创建vue3项目的流程。
使用webpack来构建项目
梁婉玲krysliang的博客
05-20 470
1、在webpack的官网可以看到，webpack是一个文件打包工具，它将复杂的的文件依赖打包成独立的资源文件。换句话说，在webpack里一切文件都是模块，通过loader加载文件，通过plugin注入钩子，最后输出由多个模块组合的文件。那么loader是什么呢？loader用来读取各类资源，比如css、js等。模块loader可以链式调用，链汇总的每个loader都将对资源进行转换，然后将结果传递给下一个loader。 也就是说webpack使用loader来管理各类的资源。 ...
webpack5带来的变更
i_ViOLeT_i的博客
02-18 301
webpack5带来的变更 默认值 在webpack5中，以下内容变成了默认值，不想改可以不写 entry: './src/index.js', output: { filename: '[name].js', path: path.resolve(__dirname, 'dist'), } devServer 的变化 启动 devServe 的方式由 webpack-dev-server 变为 webpack serve 注意！ webpack serve 内部还是需要 webpack-d
Cookie和Session的区别
weixin_30243533的博客
03-18 1329
参考：https://www.jianshu.com/p/1acdfac2b4e4 Cookie和Session的区别 共同之处： cookie和session都是用来跟踪浏览器用户身份的绘画方式。 区别： cookie数据保存在客户端，session数据保存在服务端。 session 简单的说，当你登陆一个网站的时候，如果web服务器端使用的是session，那么所有的数据都保存在...
webpack4配置vue环境和一些小坑。
热门推荐
simoon's的博客
06-08 2万+
第一步： npm init npm install webpack vue vue-loader css-loader vue-template-compiler 第二步： 创建文件： src–>app.vue，代码如下： <template> &amp
webpack 5.0
07-28
Webpack 5.0 是一个现代化的 JavaScript 模块打包工具。它提供了一种创建和管理前端项目的方式，可以将多个模块、文件和资源打包成一个或多个最终的静态资源文件，以用于在浏览器中加载。 Webpack 5.0 带来了许多新...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值