webpack从3升级到4所踩的坑

最新推荐文章于 2025-02-13 17:17:03 发布
原创 最新推荐文章于 2025-02-13 17:17:03 发布 · 312 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#webpack #前端 #javascript

为了实现JS混淆，将webpack从3.0升级到4.46.0，过程中遇到了多个问题。包括scss识别问题，需要添加sassloader；minxin.scss引入失败，解决办法是在common.scss中引入；顶部样式失效，通过添加display:flex和更改深度选择器为/deep/修复；以及由于export和import共用导致的不兼容错误，通过安装babel-plugin-transform-es2015-modules-commonjs并配置babelrc解决。

***前提：***因为要做js混淆，webpack3.0版本无法使用webpack-obfuscator，所以将webpack升级到了4.46.0版本
----webpack升级原文链接:https://my.oschina.net/u/4973111/blog/5344939
—js混淆原文链接：https://www.jb51.net/article/206359.htm
很详细：：：：
以下是我记得踩坑记录：：：：：
1.在这里插入图片描述
原因:不认识scss了需要加sassloader
解决办法：我之前的webpack.prod.config.js中是这样写的
在这里插入图片描述
把用红框标记出来的这行改成：test: /.s?css$/,
（2）然后就会出现下一个bug
在这里插入图片描述
原因：minxin.scss没有被引入成功在common.scss文件中，升级之前是不需要在common.scss中引入的，升级之后就需要在common.scss文件中引入这个minxin。
解决办法:在这里插入图片描述
(3).升级之后项目之中的顶部样式失效；

在这里插入图片描述
描述：顶部目录应该在蓝色框那块，并且字体样式也失效了
解决办法:总体再重新加display:flex,
之前的深度监听样式是>>> 样式失效 换成/deep/样式渲染成功。
在这里插入图片描述

（4）项目启动，页面无法加载，控制台报错
在这里插入图片描述
原因：export和import共用了导致不兼容引起的!!!
解决办法：npm install babel-plugin-transform-es2015-modules-commonjs
最后在根目录下的babelrc文件中配置
在这里插入图片描述

ECharts从入门到精通：解锁数据可视化的魔法世界
大模型大数据攻城狮的专栏
07-31 698
想让标题更大胆？柱子更立体？title: {text: '高颜值柱状图',},series: [{}]效果：标题粗大白，柱子带点阴影，瞬间高端大气！嫌内置主题不够独特？可以自己定义主题！});小技巧：用在线工具（比如ECharts主题编辑器）调色，省时又省力。想让图表更有创意？graphic组件能让你绘制自定义图形，甚至加点动画效果。x: 100,y: 100,{ percent: 1, rotation: Math.PI * 2 } // 旋转一周],}],效果。
webpack3升级到webpack4遇到问题总结
10-16
主要介绍了webpack3升级到webpack4遇到问题总结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
webpack3升级成4
一个无聊的人的博客
05-29 559
webpack-cli不匹配（ webpack-cli 包已经从webpack分离出来了，所以要单独安装）解决：npm install -S vue-loader@14.2.4。webpack4之后，不允许混用 exports和import。解决：改用mini-css-extract-plugin。html-webpack-plugin·版本不兼容。vue-loader和webpack 版本不兼容。webpack-dev-server版本不匹配。run dev正常打开页面空白。webpack3升级成4。
webpack3升级webpack4遇到的各种问题汇总
牛先森家的博客
04-29 1609
webpack3升级webpack4遇到的各种问题汇总
webpack3升级为webpack4的实践
高先生的猫
06-08 2285
之前尝试过一些在webpack3的基础上做的构建优化，例如引入HappyPack优化构建速度，开启loader缓存和优化包查找路径等等，详情可以查看前端webpack构建优化 但是随着时间的推移，这种优化产生的效果越来越弱化，手上的项目体积越来越大，对本地开发热更新速度和生产打包发布速度都有了很大的影响。 webpack3升级到webpack4迫在眉睫，这篇博文将记录一些我在升级过程中遇到的坑。 当你遇到这些坑时，通过搜索引擎找到我这篇文章，如果能够解决了手上的webpack配置问题，然后发自内心的感
记录webpack3升级到webpack4的艰辛历程
weixin_45532305的博客
07-30 858
项目的第三方样式库是vux，vux2必须配合vux-loader使用，webpack打包会做一些别的配置 这是项目升级前的一些打包和环境配置目录，升级后目录结构没有改变。在这说明只是对我或你们的项目配置看看有哪些地方有差异 1.升级webpack以及插件 升级webpack到版本4的命令 npm install --save-dev webpack@4 我这里更新到了4.8.1 同时需要安装webpack-cli npm install --save-dev webpack-cli 我这里更新到了2.1.
webpack@4.46.0对应的webpack-obfuscator
08-23
- *1* *2* *3* [webpack从3升级到4所踩的坑](https://blog.csdn.net/qq_39175450/article/details/130260332)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt...
webpack5 + webpack-chain 构建一个大型应用系列 2（附 vscode 跟 prettier 配置）
qq_36696468的博客
12-17 1822
上一篇：一步步从零开始用 webpack 搭建一个大型项目笔者使用了 webpack5 将项目进行了重构，并全程使用的 webpack-chain 来配置 webpack，每个功能也都是...
VUE+TS+WEBPACK框架的项目实践
热门推荐
码匠哥的技术博客
08-27 1万+
一、作者简介 WONDER专注于框架的研究，致力于提升效能，解放生产力。包括但不限于设计流程化，重构流程化，前端流程化，基于数据流、状态流的自动化测试。致力于基于javascript语言的全平台解决方案的研究（包括前端(vue为核心)，后端(thinkjs为核心)，终端(weex为核心、小程序为辅助)），目标以「技术引擎」的思想为业务侧提供强劲动力和生产力。 二、前言 很久以前在WOND
3天狂撸100+数字经济项目！低代码实战复盘：避坑指南+交付提速150%源码模板全公开
最新发布
sdgfafg_25的博客
02-13 1071
在这次项目实践中，我们积累了丰富的经验。首先，充分的前期准备至关重要。在项目开始前，对需求的深入分析、平台的精心选型以及团队的合理组建，为项目的顺利进行奠定了坚实的基础。例如，在需求分析阶段，与业务部门的充分沟通，让我们准确把握了项目的核心需求，避免了后期的需求变更和返工。在开发过程中，灵活运用低代码平台的功能和工具，以及掌握有效的开发技巧，是提高开发效率和质量的关键。熟练掌握组件的使用和配置，能够快速搭建出稳定可靠的应用程序；善于利用脚本编辑功能，实现复杂的业务逻辑，能够满足项目的多样化需求。
Vue项目从webpack3.x升级webpack4不完全指南
11-29
前段时间，泡面将自己的一个Vue-cli构建的前端框架从webpack3.x升级到了4.x版本，现在才拉出来记录一下，已备忘之用，也和大家分享一下，以免大家采坑。 原先的环境 项目原先通过Vue-cli 2.9.3 版本构建，原先使用的webpack 3.x版本 首先需要对基础包进行更新(package.json) webpack 更新到4.x版本，泡面这里更新到了4.28.3 更新webpack-dev-server，泡面更新到了3.1.14版本, 安装webpack-cli，泡面安装的是3.2.1版本 除了上面的这几个，还需要更新下面几个： vue-loader
webpack-obfuscator, web service的javascript混淆插件插件.zip
09-17
webpack-obfuscator, web service的javascript混淆插件插件 web service的 javascript混淆插件插件 安装使用NPM安装软件包并将它的添加到你的devDependencies:npm install --save-dev webpack-obfuscator用法：
webpack 报错问题（很有可能是因为版本过高）
hac_kill_you的博客
11-23 524
问题： 解决方法： npm install webpack@3.0.0 -g 这里重新下载3.0.0的版本。 （如果下载了cnpm的镜像原，可以执行： cnpm install webpack@3.0.0 -g （更快）） 最后：
Typescript配置文件(tsconfig.json)详解系列一：target和lib
zzyp1927314的博客
06-22 3358
我想Typescript设置的初衷也是希望你写代码的时候尽量不要使用和target不匹配的API（不匹配的API虽然可以向下兼容但是性能会差些）。那么ES6的一些新的API我是使用不了，如Promise。如果TS经过编译后生成的.js文件要直接在浏览器上使用，那么target一定要选择需要兼容浏览器的最低版本。如果你使用了比target中定义的javascript更高版本的语法，那么编译后的代码会自动帮你向下降级。这个参数需要配合target来使用，指定不同的target，会自动引入对应的lib库。
解决less版本过高导致项目运行报错的问题
qq_53142365的博客
03-14 1626
error:TypeError: this.getOptions is not a function 解决less版本过高导致的报错
Webpack 3.+ 升级 4.+ 操作 webpack4.44.2匹配的依赖版本号 (success)
qq_42359718的博客
09-15 596
npm uninstall webpack webpack-cli html-webpack-plugin npm i webpack@4.16.5 webpack-cli@3.1.0 html-webpack-plugin@3.2.0 -D npm run start 问题1、 旧的配置代码 new webpack.optimize.UglifyJsPlugin({ // 最紧凑的输出 beautify: false, // [删除]所有的注释 c
使用 webpack-obfuscator 进行代码混淆及报错解决方案
a123456234的博客
08-05 7607
Error: The number of constructor arguments in the derived class t must be >= than the number of constructor arguments of its base class. TypeError: Cannot read property 'tap' of undefined TypeError: Cannot read property 'sourceAndMap' of undefined
Vue js混淆加密 webpack-obfuscator
weixin_44911525的博客
01-13 3106
Vue js混淆加密 webpack-obuscator
vue项目配置 webpack-obfuscator 进行代码加密混淆
chinaherolts2008的博客
02-25 3535
背景 公司代码提供给第三方使用，为了不完全泄露源码，需要对给出的代码进行加密混淆，前端代码虽然无法做到完全加密混淆，但是通过使用 webpack-obfuscator 通过增加随机废代码段、字符编码转义等方法可以使构建代码完全混淆，达到无法恢复源码甚至无法阅读的目的。 安装 webpack-obfuscator https://www.npmjs.com/package/webpack-obfuscator npm install --save-dev webpack-obfuscator 配置 // w
Webpack3升级Webpack4踩坑实录：成功经验与解决步骤
本文档主要讲述了作者在将一个基于webpack3的项目升级到webpack4时所遇到的问题和解决经验。升级webpack的过程中，作者首先提到了webpack4版本已经发布了一段时间，他之前尝试过升级但因某些原因未能完成，这次他...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值