webpack打包安装依赖兼容性(学习时遇到的坑)

于 2024-02-05 17:53:32 发布
阅读量230 收藏
点赞数 2
文章标签： webpack 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zaomengzhe666777/article/details/136044952
版权

学习webpack, 由于学习材料久远, 通过npm安装的依赖都是最新的, 造成了各种兼容性问题, 比如nodejs版本高导致的初始化失败(npm升级导致了与OpenSSL不兼容), 依赖包不匹配等, 浪费了很多时间, 为了大家少走弯路, 提供一套可以用的, 实测过的软件, 依赖组合.

1. 当前nodejs版本:

如果nodejs版本过高可以删除再安装

查找残存的相关npm的目录和文件, 进行删除, 再执行npm -v和node -v, 应该有'...不是内部或外部命令...的提示...

这里示范的是Windows x64版

修改环境变量

为了解决npm下载慢的问题下载配置nrm

以下是与webpack相关的依赖的匹配版本

安装依赖包时用"@"带着版本.

另一个坑: 所有的*.config.js要放在项目根目录下

祝各位同学少走弯路.

造梦者666777
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
webpack 编写插件兼容不同的webpack版本
weixin_39168678的博客
11-08 357
webpack 版本虽然更新到了5+，但官网很多内容都是滞后的 比如插件编写，官网推荐的还是webpack3的写法 compiler.plugin('done', function() { console.log('Hello World!'); }); 但到webpack5基本是这样的 compiler.hooks.done.tap("xxxName:" ,()=>{ console.log('Hello World!'); }); 所以需要我们在编写webpack插件
webpack版本兼容问题
vvvvvlj
12-04 951
运行webpack时报错： Cannot find module 'webpack/bin/config-yargs' This is probably not a problem with npm. There is likely additional logging output above. 可能是版本兼容问题，更正后的版本： "devDependencies": { "webpack": "^4.39.2", "webpack-cli": "^3.3.12", "webp
webpack 安装兼容问题
Mr_Tony的专栏
07-13 564
安装sass-loader时候出现 TypeError: The ‘compilation‘ argument must be an instance of Compilation
webpack 版本冲突详细原因分析及解决办法
weixin_45509705的博客
07-20 4750
本项目使用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解决浏览器兼容问题
sanlyshi's front-end road
12-29 2248
这里记录一下我们如何通过webpack来实现兼容。
webpack3里使用uglifyjs压缩js时打包报错的解决
10-17
总的来说，解决Webpack 3中使用UglifyJS压缩JS时的打包报错，主要步骤包括检查和调整配置、确认插件版本与Webpack版本的兼容性，并适时降级插件版本。理解Webpack的配置结构以及插件的使用方式，对于快速定位和解决...
纯html+javascript+css webpack打包的项目
最新发布
04-12
- `dist`：Webpack打包后的输出目录，包含编译后的文件。 - `webpack.config.js`：Webpack的配置文件，定义入口、输出、加载器和插件等设置。 - `.babelrc`：Babel的配置文件，定义代码转换规则。 - `package.json`...
webpack打包的react案例demo.rar
06-13
这个压缩包包含了经过Webpack打包后的项目文件（dist）以及开发过程中所需的依赖库（node_modules）。让我们逐步了解Webpack与React的整合，以及如何进行配置。 **一、Webpack简介** Webpack是一个模块打包工具，它...
浏览器插件项目模板webpack打包
01-15
在这个特定的“浏览器插件项目模板webpack打包”场景中，我们将深入探讨Webpack如何用于构建和优化浏览器插件。 **Webpack基础知识** Webpack 是一个静态模块打包工具，它的核心概念是“模块”。任何静态资源...
Vue+webpack+Element 兼容问题总结(小结)
10-18
这篇文章将总结在使用 Vue、webpack 和 Element-UI 时可能遇到的兼容性问题，以及如何通过 Babel 进行解决。 Vue.js 官方明确声明不支持 IE8 及以下版本，因为这些版本不支持 ECMAScript 5 的某些特性。而 Element-...
webpack 配置时包与包版本不对应导致无法启动项目
weixin_42971933的博客
01-31 1429
webpack配置时包与包版本不对应导致报错
webpack开发环境的基本使用，以及处理版本兼容问题，
xal
03-11 2652
webpack是什么 webpack是一种前端资源构建攻击，一个静态模块打包器 webpack的五个核心概念 entry 入口文件 output 输出指示(输出到哪里) loader 让webpack处理非javaScript文件 plugins 插件，优化打包，压缩 mode 配置文件 development 开发环境 production 生产环境 初始化项目 npm init 安装webpack npm i webpack webpackcli -D webpack兼.
webpack压缩合并解决兼容性问题
小管管的博客
06-20 996
之前用npm学习的webpack打包：🔗打开快速、可靠、安全的依赖管理工具。和 npm 类似, 都是包管理工具, 可以用于下载包, 就是比npm快 🔗中文地址下载地址: https://yarn.bootcss.com/docs/install/#windows-stablewindows - 软件包(在笔记文件夹里)mac - 通过homebrew安装(看上面地址里)mac如果没安装过homeBrew先运行这个命令 上面命令不行: 试试这个: curl -o- -L https://yarn..
webpack中各个配置版本兼容问题
qq_44606064的博客
05-17 2018
webpack中各个配置版本兼容问题
package.json中webpack版本冲突
KyrieXJL的博客
11-22 715
webpack版本冲突
npm run dev报错（webpack和webpack-cli版本冲突）
tan47325的博客
10-25 8303
起因是我刚加入一个项目，克隆下来vue项目，然后安装依赖，等到npm run dev时就出现问题了，问题如下： 找了很久的问题就是找不到，后面在别人的github看到一个相似错误，经过评论对比，发现错误是一样的，故确定是版本的错误，原文作者webpack@4.20.0版本、webpack-cli@2.1.5版本，作者认为是webpack升级到4.20.0版本，可能是某些json与旧版本...
性能优化 - 查看 webpack 打包后所有的依赖关系（webpack 可视化工具）
热门推荐
White feathe 的博客
11-16 3万+
查看 webpack 打包后所有组件与组件间的依赖关系，针对多余的包文件过大，剔除首次影响加载的效率问题进行剔除修改，本次采用的是 ==webpack-bundle-analyzer==（可视化视图查看器）== 介绍1：webpack-bundle-analyzer（可视化）==将捆绑内容表示为方便的交互式可缩放树形图如下效果图：模块功能： 意识到你的文件打包压缩后中真正的内容 找出哪些模块组成最大
解决html-webpack-plugin和html-loader冲突问题
huzzzz的博客
05-29 2184
近期公司有个多页面的网站需要开发，选择用webpack构建项目。 在编写webpack config 的过程中，发现html-webpack-plugin和html-loader有冲突。 如果使用html-loader来处理html模版文件中的url，会导致html-webpack-plugin的ejs模版语法失效。 经过研究发现html-loader会把原始的html模版，编译成一个js模块样式的字符串，导致html-webpack-plugin解析的时候，发现文件已经被编译了，会直接会跳过模版语法的检测
webpack 转译依赖
09-02
webpack 是一个模块打包工具，它的主要作用是将多个模块打包成一个文件，以便在浏览器中运行。在项目中使用 webpack，有时候会遇到需要将依赖进行转译的情况。 转译依赖主要是为了解决浏览器兼容性问题。有些新特性或语法在一些旧版本的浏览器中不被支持，如果直接在项目中使用这些新特性，就会导致在旧版本浏览器中出现运行错误或功能无法正常使用的问题。 为了解决这个问题，我们可以使用 webpack 的一些相关插件或工具来进行转译依赖。比如常用的插件有 @babel/preset-env 和 @babel/preset-react，它们可以将 ES6 或 JSX 语法转换为 ES5 语法，以便在旧版本浏览器中运行。这些插件可以配合 webpack 的 loader 使用，将需要转译的文件传递给它们进行处理。 使用转译依赖的步骤大致如下： 1. 在项目中安装相关插件，比如 @babel/preset-env 和 @babel/preset-react。 2. 在 webpack 的配置文件中，配置相关的 loader 和插件。 3. 在需要转译的文件中，通过 import 或 require 引入需要转译的依赖。 4. 运行 webpack 打包命令，webpack 会根据配置文件的规则，将需要转译的依赖进行转换，并打包到最终的文件中。 转译依赖是为了提供更好的浏览器兼容性，让项目能够在不同浏览器上正常运行。通过使用 webpack 提供的转译相关插件和工具，我们可以方便地将依赖进行转译，提高开发效率和项目的稳定性。同时，也要注意及时更新相关的插件版本，以适应不断变化的浏览器兼容性需求。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值