webpack版本问题

由于webpack版本较多,而且配置写法,每个版本都大大小小有差异,因版本问题造成的错误很多
1下载指定版本我常用的版本3.3.0,
2不同版本中的坑

2.1在3.0之后版本配置entry和output路劲不再支持相对路径只能使用__dirname拼接成的绝对路径)

var path=require('path');
path.join(__dirname,'')

2.2在版本4之后安装常用的html-webpack-plugin插件,在打包时会报错,因为4.0之后安装html-webpack-plugin增加了依赖(为此我将版本还是进行了降级)

2.3注意全局的webpack版本和项目中的webpack版本冲突问题,有时候你会发现自己安装的明明是3.0版本,却还是用4.0打包的,那是因为你安装了全局的webpack为4.0
解决方案:

cnpm uninstall webpack -g

卸载全局的webpack

 cnpm i webpack@3.3.0 -g  

重新安装指定版本的webpack

2.4在4.0之后的版本mode为必须配置的选项,否则会报错
解决1:

webpack --mode development

解决2:package.json中配置

"scripts": {
  "start": " --mode development",
  "build": "--mode production"
}

2.5在2.0版本后module中的loader配置叫做rules,但是在1.0当中叫做loaders
3版本迁移造成的错误处理
3.1webpack打包过程中如果你发现常用的node内置模块一直报错
比如:cannot find module “minimatch”
解决1:确认环境变量ok,cmd中查看node -v是否报错,报错的话就重新配置环境变量或者node卸载重装(node默认安装会自己配置环境变量)
解决2:node环境ok的情况下就是node_module包出错了
1删除node_module文件夹
2cnpm cache clean
3cnpm install
亲测可行

在 Vue 项目中降低 Webpack 版本,通常是因为某些插件或配置与最新版本Webpack 不兼容。可以通过以下步骤进行降级操作: 1. **卸载当前版本Webpack** 如果项目中已经安装了 Webpack,需要先将其卸载: ```bash npm uninstall webpack ``` 2. **安装指定版本Webpack** 根据实际需求选择合适的旧版本进行安装。例如,若要安装 Webpack 4 的版本,可以使用如下命令: ```bash npm install --save-dev webpack@4.42.0 ``` 此外,为了确保 Webpack 能够正常运行,还需要安装配套的工具,如 `webpack-cli` 和 `webpack-dev-server`,它们的版本也需要与 Webpack版本保持兼容: ```bash npm install --save-dev webpack-cli@3.3.11 webpack-dev-server@3.11.0 ``` 这些版本组合已经被验证为适用于 Vue 2 项目中的 Webpack 配置[^2]。 3. **检查并更新配置文件** 在降级 Webpack 后,可能需要调整 `webpack.config.js` 或 `vue.config.js` 文件以适配新安装的版本。例如,在 Vue 项目中使用 `html-webpack-plugin` 插件生成 HTML 文件时,需确保其配置与当前 Webpack 版本兼容: ```javascript const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { plugins: [ new HtmlWebpackPlugin({ template: './public/index.html' }) ] }; ``` 如果项目中使用了其他插件(如 `workbox-webpack-plugin`),也应检查其是否支持当前 Webpack 版本,并相应地调整配置[^3]。 4. **验证安装和配置** 完成上述操作后,建议运行开发服务器或构建命令以验证 Webpack 是否正常工作: ```bash npm run serve ``` 如果一切顺利,项目应该能够正确启动并运行,而不会出现因 Webpack 版本过高导致的兼容性问题。 通过以上步骤,可以有效地将 Vue 项目中的 Webpack 版本降级至所需水平,从而解决部分插件不兼容的问题[^1]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值