webpack从3升级到4所踩的坑

最新推荐文章于 2024-06-22 23:03:21 发布
最新推荐文章于 2024-06-22 23:03:21 发布
阅读量194 收藏
点赞数
文章标签： webpack 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39175450/article/details/130260332
版权

***前提：***因为要做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。
解决办法:

最低0.47元/天 解锁文章
菜鸟在食堂
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
webpack3升级到webpack4
好好学习
04-22 2934
webpack4出来有一段时间了，现在3升级到4 运行 npm i npm-check -g npm-check -u 选择要更新的依赖，loader之类都更新到最新 npm i webpack-cli --save-dev dev和prod 添加不同mode utils.js css 预编译处理 前缀于 loder配置， 生产打包使用MiniCssExtractPlugin expor...
webpack3升级到webpack4遇到问题总结
10-16
主要介绍了webpack3升级到webpack4遇到问题总结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
webpack3升级为webpack4的实践
高先生的猫
06-08 1989
之前尝试过一些在webpack3的基础上做的构建优化，例如引入HappyPack优化构建速度，开启loader缓存和优化包查找路径等等，详情可以查看前端webpack构建优化 但是随着时间的推移，这种优化产生的效果越来越弱化，手上的项目体积越来越大，对本地开发热更新速度和生产打包发布速度都有了很大的影响。 webpack3升级到webpack4迫在眉睫，这篇博文将记录一些我在升级过程中遇到的坑。 当你遇到这些坑时，通过搜索引擎找到我这篇文章，如果能够解决了手上的webpack配置问题，然后发自内心的感
vue webpack打包配置生成的源映射文件不包含源代码内容、加密混淆压缩
帥潔的博客
04-15 1123
通过配置文件，我们可以使用Vue CLI轻松实现对Vue应用程序代码的压缩、加密和混淆。通过压缩代码，我们可以减小文件的大小，提高加载速度。通过加密和混淆代码，我们可以增强应用程序的安全性，防止源代码被轻易泄露。代码压缩、加密和混淆是优化 Vue 应用程序性能和提高安全性的关键步骤。它们可以帮助我们提供更好的用户体验，并保护应用程序的知识产权。lintOnSave: false, // eslint-loader 是否在保存的时候检查。
记录webpack3升级到webpack4的艰辛历程
weixin_45532305的博客
07-30 709
项目的第三方样式库是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.
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
详解webpack4升级指南以及从webpack3.x迁移
08-27
详解webpack4升级指南以及从webpack3.x迁移 本篇文章主要介绍了详解webpack4升级指南以及从webpack3.x迁移。下面是相关知识点： 1. 安装webpack4：需要安装webpack和webpack-cli，既可以全局安装，也可以局部安装...
记一次webpack3升级webpack4的踩坑经历
08-27
主要介绍了记一次webpack3升级webpack4的踩坑经历，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
逐步迁移-从Webpack 3到Webpack 4
04-11
本文详细介绍了从Webpack 3到Webpack 4的迁移步骤。
webpack 报错问题（很有可能是因为版本过高）
hac_kill_you的博客
11-23 390
问题： 解决方法： npm install webpack@3.0.0 -g 这里重新下载3.0.0的版本。 （如果下载了cnpm的镜像原，可以执行： cnpm install webpack@3.0.0 -g （更快）） 最后：
webpack-obfuscator, web service的javascript混淆插件插件.zip
09-17
webpack-obfuscator, web service的javascript混淆插件插件 web service的 javascript混淆插件插件 安装使用NPM安装软件包并将它的添加到你的devDependencies:npm install --save-dev webpack-obfuscator用法：
Typescript配置文件(tsconfig.json)详解系列一：target和lib
最新发布
zzyp1927314的博客
06-22 1203
我想Typescript设置的初衷也是希望你写代码的时候尽量不要使用和target不匹配的API（不匹配的API虽然可以向下兼容但是性能会差些）。那么ES6的一些新的API我是使用不了，如Promise。如果TS经过编译后生成的.js文件要直接在浏览器上使用，那么target一定要选择需要兼容浏览器的最低版本。如果你使用了比target中定义的javascript更高版本的语法，那么编译后的代码会自动帮你向下降级。这个参数需要配合target来使用，指定不同的target，会自动引入对应的lib库。
解决less版本过高导致项目运行报错的问题
qq_53142365的博客
03-14 1374
error:TypeError: this.getOptions is not a function 解决less版本过高导致的报错
Webpack 3.+ 升级 4.+ 操作 webpack4.44.2匹配的依赖版本号 (success)
qq_42359718的博客
09-15 473
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
Vue js混淆加密 webpack-obfuscator
weixin_44911525的博客
01-13 2784
Vue js混淆加密 webpack-obuscator
如何升高webpack版本
weixin_42601134的博客
02-15 3105
要升级Webpack的版本，您可以按照以下步骤操作： 1.首先，打开您的项目文件夹，找到package.json文件。 2.在该文件中找到"webpack"的依赖项，查看当前使用的版本号。 3.在控制台中运行npm install webpack@x.x.x(x.x.x为您要升级到的新版本号)，以安装新版本的Webpack。 4.如果您的项目中使用了Webpack插件或加载器，请确保它们也兼容新版...
vue打包js文件混淆加密保护
热门推荐
大英雄不该去雪山打滚
11-22 1万+
需求 部署到服务器上的vue项目在网页F12之后能看到源码，vue文件啦，js文件啦，都能看到，连我的注释都能看到，这能随便给别人看？ 环境 vue 3 vue cli 4 webpack 4 解决方案 方案一 工具：“uglifyjs-webpack-plugin”: “^2.2.0” 使用： const UglifyJsPlugin = require('uglifyjs-webpack-plugin') ... module.exports = { configureWebpack: {
typescript ts 错误列表
前端kk的博客
04-11 6295
typescript ts 错误列表
webpack3升级webpack4
09-05
要将 Webpack 3 升级到 Webpack 4，你需要执行以下步骤： 1. 全局安装 Webpack 4: ``` npm install -g webpack@4 ``` 2. 在项目目录中，更新项目的 package.json 文件，将 webpack 的版本号更新为 4.x.x: ``` npm ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值