Webpackアップグレード
6954 ワード
reactバージョンは15.6.2バージョンなので、パッケージリリース後、reactプロンプトバージョンoutdatedのため、すべてのバージョンを最新にアップグレードしようとしましたが、関連バージョンに依存し、アップグレード後に様々な問題が発生しましたので、ここに記録してください.
一、ネット上ですべてのアップグレードコマンドを調べて、次のコマンドをテストして結果がないことを発見します.
二、npmモジュールのアップグレードツールnpm-check、アップグレードは表示コマンドに依存し、まずnpm-checkをインストールし、グローバルにインストールし、コマンドラインのヒントに従ってコンピュータの起動パスワードの授権を入力する必要がある.
インストールに成功すると、プロジェクトディレクトリの下でコマンドラインnpm-check-uに更新リストが表示されます.下矢印は更新が必要な項目を移動し、スペースキーを使用して更新が必要かどうかを選択し、選択が完了したら、車をノックして更新します.
三、アップグレードが完了した后に新しい问题を発见します:新しいバージョンはwebpack-cliを単独で出して、npm webpack-cliが必要です
四、webpack-cliをインストールした後、npm startコマンドを実行し、エラーを発見する:
コマンドラインはwebpack dllpluginの鍋と言います~それでは今dllの配置を探して、バージョンが違うように見えて、変化する必要があります.
1.gitでまた同じ問題に遭遇した人、webpack--config webpack.config.vendor.js,コマンドライン実行後,webpack-cliのインストール,コマンドnpm install-Dの実行を要求する.インストールが完了した後も上のコマンドを実行してもインストールを要求し、コマンドnpm install webpack-cli-gを実行します.グローバルをインストールするには、前にsudoを付ける必要があります.
2.以上、完全局ウェブパック、ウェブパック-cliをインストール後、コマンドウェブパック--configウェブパックを実行する.config.vendor.js、エラーメッセージにwebpackは含まれていません.config.vendor.js;したがって、ファイルを構成する方法を検索します.最終的に最新バージョンのwebpack 4を使用することが分かった.xxは現在解決できない問題なので、webpackバージョンはしばらく最新にアップグレードしないでください.
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を要求しています.xバージョンのwebpackなど;だから、最高バージョンにアップグレードし直します.それでは依然として問題を迂回することができません;次にnpm-check-uを使用して更新をチェックし、最新に更新します.
4.eslintエラーメッセージにはlinebreak-styleの問題があり、webstormでルートディレクトリを選択すると以下の図になります.また、preferenceではeditor、line seperators、LINIX and os x()オプションを選択できます.
5.では、今の質問の答えは原点を探して、依然として以下の報告の間違いが現れて、分析して、dll、webpackの配置の問題であるべきです;
問題を解決するには、次の手順に従います.
1)まず対応するwebpack 4の構成問題を検索し、一つ一つ問題を調べる.dll.configはすでに構成されているので、一部の構成が変更されているかどうか.コマンドライン実行
2)排查问题js圧缩问题:期间にwarningがあるので、何も入れないでください.
dllを次のように変更します.
次にdllコマンドwebpack-p--progress--config dllをもう一度走ります.config.js
3)pluginでHtmlWebpackPlugin、HtmlWebpackPlugin、CommonsChunkPlugin、UglifyJsPlugin、ParallelUglifyPluginを削除し、pluginレベルで設定する必要があることを発見
一、ネット上ですべてのアップグレードコマンドを調べて、次のコマンドをテストして結果がないことを発見します.
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! [email protected] 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 [email protected] 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.以上、完全局ウェブパック、ウェブパック-cliをインストール後、コマンドウェブパック--configウェブパックを実行する.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を要求しています.xバージョンのwebpackなど;だから、最高バージョンにアップグレードし直します.それでは依然として問題を迂回することができません;次にnpm-check-uを使用して更新をチェックし、最新に更新します.
4.eslintエラーメッセージにはlinebreak-styleの問題があり、webstormでルートディレクトリを選択すると以下の図になります.また、preferenceではeditor、line seperators、LINIX and os x()オプションを選択できます.
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! [email protected] 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 [email protected] 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-plugindllを次のように変更します.
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"
}
}
}
}