webpack升级

本文记录了从React 15.6.2版本升级过程中遇到的问题及解决方案,包括使用npm-check工具进行依赖升级,webpack配置调整以适配新版本,以及解决dll、eslint等配置错误。

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

因为react版本是15.6.2版本,所以打包发布之后,react提示版本outdated,所以想要将所有版本都升级到最新,但是相关版本有依赖,升级之后出现各种问题,在此处记录一下。

一、网上查到全部升级命令,下面测试一下命令发现没有什么结果;

npm update -S
npm update -D

二、npm模块升级工具npm-check,升级依赖查看命令,首先需要安装npm-check,全局安装,按照命令行提示输入电脑开机密码授权。

sudo npm install -g npm-check

安装成功后,在项目目录下,命令行npm-check -u会出现更新列表;向下箭头可以移动需要更新的项目,使用空格键选择是否需要更新,选择完成后,敲回车更新;

三、升级完成之后发现新问题:新版本将webpack-cli单独拿出来了,需要 npm webpack-cli

The CLI moved into a separate package: webpack-cli
Please install 'webpack-cli' in addition to webpack itself to use the CLI
-> When using npm: npm i -D webpack-cli
-> When using yarn: yarn add -D webpack-cli
module.js:529
    throw err;
    ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'
    at Function.Module._resolveFilename (module.js:527:15)
    at Function.Module._load (module.js:476:23)
    at Module.require (module.js:568:17)
    at require (internal/module.js:11:18)
    .....

四、安装webpack-cli后,运行npm start命令,发现报错:

up to date in 4.517s
development
/Users/.../node_modules/webpack/node_modules/schema-utils/src/validateOptions.js:31
    throw new ValidationError(ajv.errors, name);
    ^

ValidationError: Dll Reference Plugin Invalid Options

options.manifest.content['./node_modules/core-js/modules/_export.js']['meta'] is an invalid additional property
options.manifest.content['./node_modules/fbjs/lib/invariant.js']['meta'] is an invalid additional property
.........
optionsnpm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! configcenter@0.1.1 dev: `npm install && export NODE_ENV=development && webpack-dev-server --progress --colors -d -w`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the configcenter@0.1.1 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

命令行说是webpack dllplugin的锅~那么现在去查找dll的配置,看起来版本不同,需要变化。

1.git 上又遇到一样问题的人,webpack --config webpack.config.vendor.js,命令行执行之后,要求安装webpack-cli,执行命令npm install -D 执行;安装完成后运行上面命令依然要求安装,执行命令npm install webpack-cli -g;请记得安装全局需要在前面加上sudo;

2.以上安装完全局webpack、webpack-cli之后,执行命令webpack --config webpack.config.vendor.js,报错项目中不包含webpack.config.vendor.js;所以,依然查找 如何配置该文件;最终发现使用最新版本的webpack 4.xx目前又不能解决的问题,所以webpack版本暂时不要升级到最新;

"webpack": "^3.12.0",
"webpack-dev-server": "^2.11.3",

3.血泪史之一,eslint不要升级到最新版本,会出现很多问题,例如window等命令无法找到报错等;

但是安装了低版本的eslint仍然存在新的问题,项目中报错Module build failed: Error: Plugin/Preset files are not allowed to export objects, only functions.  查找问题,需要安装npm i @babel/preset-react   ;问题回来了,preset-react要求高版本eslint,4.x版本的webpack等;所以,重新升级到最高版本。那么依然绕不开问题;下面继续使用 npm-check -u检查更新,更新到最新;

4.eslint报错信息会有linebreak-style问题,webstorm选中根目录如下图:另外,在preference中,可以选择editor,选择line seperators,选择LINIX and os x(\n)选项;

5.那么现在问题回答搜原点,依然会出现如下报错,分析起来,应该是dll、webpack配置问题;

    throw new ValidationError(ajv.errors, name);
    ^

ValidationError: Dll Reference Plugin Invalid Options

options.manifest.content['./node_modules/core-js/modules/_export.js']['meta'] is an invalid additional property
options.manifest.content['./node_modules/fbjs/lib/invariant.js']['meta'] is an invalid additional property
options.manifest.content['./node_modules/core-js/modules/_an-object.js']['meta'] is an invalid additional property
options.manifest.content['./node_modules/core-js/modules/_global.js']['meta'] is an invalid additional property
options.manifest.content['./node_modules/core-js/modules/_fails.js']['meta'] is an invalid additional property
...
optionsnpm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! configcenter@0.1.1 dev: `npm --registry http://npm.envisioncn.com:7001 install && export NODE_ENV=development && webpack-dev-server --progress --colors -d -w`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the configcenter@0.1.1 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/yuxin.zhang/.npm/_logs/2018-11-15T09_45_58_899Z-debug.log

Process finished with exit code 1

于是解决问题步骤:

1)首先查找对应webpack 4配置问题,对照一一排查问题;dll.config已经配置好,那么其中是否某些配置已经变更;命令行执行

 webpack -p --progress --config dll.config.js 

报错:
/Users/.../project/node_modules/webpack-cli/bin/cli.js:244
                                throw err;
                                ^

Error: webpack.optimize.UglifyJsPlugin has been removed, please use config.optimization.minimize instead.

2)排查问题出现js压缩问题:期间会有warning,请少什么装什么;

npm install uglifyjs-webpack-plugin

配置dll改成下面:

output: {
        path: path.resolve("./output/webpack-dll/dev"),
        filename: '[name].js',
        library: ["DLL", "[name]"],
    },

然后重新跑一下 dll命令 webpack -p --progress --config dll.config.js

3)发现需要将 plugin中 HtmlWebpackPlugin、HtmlWebpackPlugin、CommonsChunkPlugin、UglifyJsPlugin、ParallelUglifyPlugin去掉,在plugin平级设置 

plugin:[...],

    //压缩js
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                uglifyOptions: {
                    compress: false
                }
            }),
            new OptimizeCSSPlugin({
                names: ['commons', 'lang'],
                filename: isPublish ? 'res/[name]/index_[chunkhash:8].js' : 'res/[name]/index.js',
                minChunks: Infinity
            })

        ],
        splitChunks: {
            chunks: 'async',
            // 大于30KB才单独分离成chunk
            minSize: 30000,
            maxAsyncRequests: 5,
            maxInitialRequests: 3,
            name: true,
            cacheGroups: {
                default: {
                    priority: -20,
                    reuseExistingChunk: true,
                },
                vendors: {
                    name: DLL_NAME,
                    test: /[\\/]node_modules[\\/]/,
                    priority: -10,
                    chunks: "all"
                }
            }
        }
    }

 

### 迁移项目设置和配置 迁移从 Webpack 到 Vite 主要涉及几个方面:安装Vite、调整构建工具链以及更新依赖项。对于大多数现代前端应用而言,此过程相对简单。 #### 安装 Vite 并初始化项目结构 为了开始迁移,在现有项目根目录下执行命令来安装 Vite: ```bash npm install vite --save-dev ``` 如果希望创建一个新的基于当前项目的 Vite 版本,则可以考虑使用 `create-vite` 脚手架工具快速搭建基础环境[^1]。 #### 更新依赖关系 检查 package.json 文件中的 devDependencies 和 dependencies 部分,删除不再需要的 Webpack 及其插件,并替换为适用于 Vite 的替代方案。通常情况下,许多针对特定框架(如 React 或 Vue)优化过的模板可以直接兼容 Vite,减少了额外的工作量[^2]。 #### 修改入口文件路径 由于两者之间存在差异,可能需要更改 HTML 中引入 JavaScript/CSS 文件的方式。例如,在 Webpack 中可能是通过 HtmlWebpackPlugin 自动生成链接标签;而在 Vite 下,默认会读取 public/index.html 来加载资源。因此建议手动编辑该文件以适应新的开发模式[^3]。 #### 处理别名和其他高级特性 Webpack 提供了一些方便的功能比如模块解析别名 (@ 表示 src/) ,这些功能同样可以在 Vite 中实现。只需要在 vite.config.js 中适当配置 alias 字段即可达到相同效果。另外像热重载(HMR),代码分割等功能也几乎无需改动就能正常工作于 Vite 上面[^4]。 ```javascript // vite.config.js 示例 import { defineConfig } from 'vite' export default defineConfig({ resolve: { alias: [ { find: '@', replacement: '/src' } ] }, }) ```
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值