webpack使用自定义打包报错原因

最新推荐文章于 2022-06-10 14:15:09 发布
最新推荐文章于 2022-06-10 14:15:09 发布
阅读量393 收藏
点赞数 2
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_42236003/article/details/87106268
本文记录了在使用Webpack 3.6进行项目打包时遇到的版本冲突问题，详细描述了错误现象，并分享了解决方案，即调整webpack-dev-server版本至2.9.1，确保其与Webpack主版本兼容。

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

webpack使用自定义打包报错
报错结果截图
在这里插入图片描述这里我使用的是webpack 3.6
查阅官方文档发现为webpack版本冲突，下载webpack-dev-server 为2.9.1（或者其他低于webpack版本）安装成功
安装命令行 cnpm insatll webpack-dev-server@2.9.1 -D

在这里插入图片描述

谭婧杰
关注
Element Plus使用自定义主题报错Invalid options in vue.config.js: css.preprocessorOptions is not allowed
代码简单说 Vue、JAVA、PHP、Node.js 熟练运用，接口、架构、性能全搞定。
12-25 379
通过这种方式，我们不仅解决了原先的错误，还成功实现了自定义主题颜色的配置。通过修改index.scss文件中的样式，你可以自由调整 Element Plus 的配色方案，满足项目的个性化需求。希望这个分享能帮到你，如果遇到类似的问题，可以参考上面的配置方式进行调整。如果你有其他问题，欢迎留言讨论哦！
webpack 文件打包
ivenqin的博客
04-23 470
上一节中，我们已经安装好了 webpack ，本节我们来学习 何使用 webpack 进行文件打包。 使用webpack打包文件 要打包文件，首先我们需要初始化一个项目，前面我们已经创建好了一个 xkd_webpack 的项目，并且这个项目根目录下已经有了一个 package.json 文件、package-lock.json 文件和一个 node_modules 文件夹，如下所示： 在实际项目中，为了方便管理许多文件，我们可能需要创建一个 src 文件夹存放入口文件等开发文件，然后创建一个 dist 文
解决webpack -p压缩打包react报语法错误的方法
11-30
前言 最近在用webpack打包react代码的时候发现一个问题，做一个处理总结分享出来给大家，下面来一起看看详细的介绍： 我的webpack配置： var webpack = require('webpack'); //打包less插件 var ExtractTextPlugin = require('extract-text-webpack-plugin'); //这里的'./css/bundle.css'设置打包地址 var ExtractLess = new ExtractTextPlugin('./css/bundle.css'); //打包多个文件插件 //var commons
VsCode终端webpack命令无效
m0_57135756的博客
04-05 738
vscode终端webpack无效
webpack自定义打包
qq_44028298的博客
04-24 232
webpack自定义打包时，contentBase不能被解析的问题!!! 今天在学习webpack自定义打包值，去构建热加载下载了webpack-dev-server用npx webpack-dev-server报错如下 这种小问题能忍？ 反手就是一个百度，，，额只能说，百度广告真好！！！这问题还是的找官网！ 官网在webpack5中已经去掉了这个contentBase改成了另一种写法！成功解决 ...
初学webpack，使用url-loader 和file-loader打包背景图片不生效的问题
Akanarika520的博客
03-30 2498
问题描述： 在项目里，的css文件夹里引用了这个图片，想让这个图片作为html的背景展示，然后使用webpack打包。 在学习webpack时候得知，大于8KB的图片要使用 file-loader打包，小于8KB的图片会使用url-loader打包。下图是我目前的配置文件，以及目录结构。 。于是开始使用npm打包。打包成功结果如下： 图片和bundle.js均正常生成，图片的名字格式也符合我的file-loader里的name配置。然后点击html打开页面。 发现样式和文字均正常显示，.
webpack 打包 css 报错
weixin_45773503的博客
01-24 256
UnhandledPromiseRejectionWarning: TypeError: this.getResolve is not a function 版本过高导致！！！ 在 package.json 中将 css-loader 和 style-loader 版本号改为如下低版本 "css-loader": "^3.3.0", "style-loader": "^1.0.0" 然后重新的安装依赖的包 npm install 就可以打包成功了 ...
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
11-20
在Vue项目中，当使用`uglifyjs-webpack-plugin`进行代码压缩和优化时，可能会遇到打包报错的问题。报错信息通常包含"Unexpected token: keyword (const)"，这表明UglifyJS无法处理ES6语法，因为UglifyJS只支持ES5及...
使用 webpack 打包 TS 代码(中)
M_ik_Z的博客
03-02 1076
解决上面遗留的问题问题一：每次编译完成都得重新在 HTML 中引入一次。解决方案：问题二：每次编译都是新文件覆盖旧文件，但是希望它把原文件删除并且重新创建文件。解决方案： 问题一：每次编译完成都得重新在 HTML 中引入一次。 解决方案： 使用插件 html-webpack-plugin 。 在终端输入 npm i -D html-webpack-plugin 下载需要使用的插件。 对 webpack 进行配置 // webpackconfig.js const HtmlWebpackPlug
webpack打包优化和打包上线
LiuBo_1999的博客
06-04 515
图片优化 使用 url-loader 优化， 将小图片转化成base64压缩,防止小图片太多请求次数太多。 下载 url-loader npm install -D url-loader 配置 在 webpack.prod.conf.js 文件夹中配置 module: { rules: [{ test: /\.(png|svg|jpg|gif)$/, use: [{ loader: 'url-loader', // 优化小图片
webpack 安装与打包+自定义配置
qq_38674970的博客
08-19 260
npm install --save-dev webpack // 首先安装 webpack hello.js -o hello.bundle.js --watch // 这一就可以吧hello.js打包了 --watch就不用每次修改都要执行命令 // 建立一个 webpack.config.js 文件 const path = require('path') modu...
webpack打包vue项目报错：Cannot assign to read only property ‘exports‘ of object
彭世瑜的博客
02-17 1313
打包时报错 Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>' 原因 webpack 2中不允许混用import和module.exports 解决方法 安装插件 npm install --save-dev @babel/plugin-transform-modules-commonjs 插件地址：https://babeljs.io/docs/en/babel-pl
【Webpack基础】不同的打包模式
小管打天下的博客
06-10 744
每次切换不同打包模式，都需要修改，比较麻烦所以，可以为不同的打包模式 创建一个 配置文件 1.2 webpack.prod.js 1.3 打包警告 此时打包就会报错，因为它不知道你使用哪个配置文件，此时就会使用默认配置build -> 线上打包dev -> 开发打包 1.5 问题：dev 打包会清空 dist 目录 如果不希望清空，可以通过如下配置： 1.6 问题：dev prod 配置文件内容重复 借助工具 webpack-merge 提取 webpack.prod.js 公共配置 提取 web
webpack打包后的图片无法显示问题
weixin_45748460的博客
03-19 7112
使用图片作为背景图片，用webpack（前端模块化打包工具）进行打包，结果背景图片没有显示出来。在终端输入命令后没有显示任何错误， 看到浏览器这里提示找不到背景图片的所在地址！！！ 解决方案： webpack要将图片进行打包，需要安装儒url-loader加载器，加载器有个默认的设置选项limit：8196，当你的图片大小不超过8kb的时候，打包的时候会生成base64位的图片地址，这种情况下...
前端工具webpack安装/打包过程中遇到的问题以及详细的解决方法
可可爱爱的你吖的博客
08-13 1109
webpack打包过程中遇到的各种问题以及详细的解决方法 很多人基本上都是在网上找的视频自学的，但是网上找到的学习视频很少是发布的，大都是一两年前的，视频中所用的webpack的版本也是几年前的，前端的知识更新的很快，不同的版本，执行的命令也不一样，成功用webpack打包自定义的js文件，我花了快三天的时间，整个人都头大。 WebPack4.0+以上版本 打包警告提示The ‘mode’ op...
《webpack5 实战二》之css打包
星宇大前端
04-09 388
前言：项目一直在用webpack 打包，也系统的跟着B站的视频教程去学过，但是总是觉得差了点什么，有些配置还是不知道，决定把一些例子写下来总结下知识点，顺便学习下webpack5。 webpack实战系列专栏 webpack实战源码 webpack官网文档 webpack默认只支持打包json和js,打包css需要使用loader进行处理。   目标过程分解 目标：打包css、less、sass等样式资源 步骤： 创建js、样式和webpack配置文件 webpack 配置文件添加处理.
webpack打包css
weixin_50736511的博客
03-10 141
首先定义一个css样式 body{ background-color: pink; } 把他们都分类放入文件中但是不要忘记改路径 在webpack.config.js写入代码 module:{ rules:[ { test:/\.css$/, use:['style-loader','css-loader'] }
【webpack5修行之道】第5篇：webpack对js语法检查
j178202798的博客
06-17 678
上篇我们讲了， 这篇我们讲eslint 和 eslint-loader对js进行语法检查, 先安装包： npm install --save-dev eslint eslint-loader 修改webpack.config.js文件，添加eslint-loader const { resolve } = require('path') const HtmlWebpackPlugin = require('html-webpack-plugin') const MiniCssExtractP.
模仿webpack开发一个属于自己的x-pack打包工具
问白的博客
08-05 1631
模拟webpack实现 x-pack 自定义打包 模仿webpack打包工具写一个自己的小型打包工具，并开发一个自定义loader； 分析webpack打包结果 我们可以先建立一个简单的工程项目，然后使用webpack打包之后发现其打包之后的文件主要是根据 webpack.config.js 配置文件进行一系列的打包，比如设置出入口文件各种loader， 将注释的部分删除，可以发现其整体是一个立即...
nuxt3 样式打包报错
最新发布
05-01
### Nuxt3 样式打包报错解决方案 在开发基于 Nuxt3 的项目时，如果遇到样式打包过程中出现的错误，通常可能是由于以下几个原因引起的：依赖版本不兼容、缺少必要的模块配置或者构建工具未正确初始化。以下是针对该...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值