vue cli を webapck4 にアップグレードする方法

今回は、vue cli で webapck4 をアップグレードする方法を説明します。vue cli で webapck4 をアップグレードする際の 注意事項 は何ですか? 以下は実際的なケースです。

webpack4 がリリースされてしばらく経ち、プラグインシステムが安定してきたので、webpack3 のパッケージング速度に満足していないので、現在取り組んでいるプロジェクトをアップグレードすることにし、webpack4 を練習したいと思います。 。

新機能

0 構成

パーセルがリリースされた後のはずですが、webpack チームはその構成が確かに少し複雑で、始めるのが簡単ではないことに気づきました。そのため、webapck4 はゼロ構成起動のサポートを開始します。ただし、webpack4 の 0 設定では、デフォルトのエントリと出力のみがサポートされます。つまり、デフォルトのエントリは ./src で、デフォルトの出力は /dist です。

モードの選択mode

modeには、プロダクションと開発の2つのオプションがあります。必須オプションとして、モードをデフォルトに設定することはできません。実稼働モードでは、コード圧縮やスコープのプロモーションなどの必要な最適化がデフォルトで行われ、process.env.NODE_ENV がデフォルトで実稼働として指定されます。開発モードでは、インクリメンタル ビルドが最適化され、コメントとプロンプトがサポートされ、eval でのソース マップがサポートされますが、デフォルトでは process.env.NODE_ENV が開発として指定されます。

副作用

この構成により、梱包体積を大幅に削減できます。モジュールの package.json がsideEffects:falseで構成されている場合、モジュールに副作用がないことを示します。これは、webpackが再エクスポートに使用されるコードを安全にクリーンアップできることを意味します。

モジュールタイプ

webpack4は5つのモジュールタイプを提供します。

1. json:

   requireとimportでインポートできるJSON形式のデータ (デフォルトは.jsonファイル)

2. webassembly: WebAssemblyモジュール、(現在.wasmファイルのデフォルトタイプ)

3. javascript/auto: (webpack 3 のデフォルトのタイプ) すべての JS モジュール システム: CommonJS、AMD をサポートします。

4. javascript/esm: EcmaScript モジュール (デフォルトの .mjs ファイル)。

5. javascript/dynamic: CommonJS と AMD のみをサポートします。

JSON

webpack 4 は、JSON のネイティブ処理をサポートするだけでなく、JSON の Tree Shaking もサポートします。 ESM 構文を使用して json をインポートすると、webpack は JSON モジュール内の未使用のエクスポートを削除します。また、ローダーを使用してjsonをjsに変換したい場合は、typeをjavascript/autoに設定する必要があります。

最適化

Webpack 4 では CommonsChunkPlugin が削除され、その機能の多くがデフォルトで有効になりました。したがって、webpack4 は良好なデフォルト最適化を実現できます。ただし、カスタム キャッシュ戦略が必要な場合には、optimization.splitChunks と optimization.runtimeChunk が追加されました。具体的な説明はこちらの記事で詳しく解説していますのでご参照ください。 CommonsChunkPlugin を RIP して、クリックしてプレビューします

。

段階的なアップグレード

私は元の vue cli プロジェクトをアップグレードしました。一般的に、アップグレードは 2 つのステップに分けて行われます。まず、関連する依存プラグインをアップグレードし、次に webapck を最適化します。プロフィール

。

プラグインのアップグレード

まず、以下のプラグインを対応するバージョンまたは最新バージョンにアップグレードしてください

webpack@4.4.1

css-loader@0.28.10,

extract
-text -webpack-plugin@ 4.0.0-beta.0、file-loader@1.1.11、html-webpack-plugin@3.1.0、
optimize-css-assets-webpack-plugin@4.0.0、
url -loader@1.0、1、
vue-loader@14.2.2、
vue-style-loader@4.1.0、
vue-template-compiler@2.5.16、
webpack-bundle-analyzer@2.11.1、
webpack-dev-middleware @3.1.0、
webpack-dev-server@3.1.1、
webpack-hot-middleware@2.21.2

他のパッケージでエラーが発生した場合は、最新のもの。

設定ファイルを更新

webpack.dev.conf.js

dev环境变化不大，毕竟webpack4很大一部分的优化都是针对生产环境的，该文件我们只需要删除一些不再需要的插件既可以。例如：webpack.NamedModulesPlugin、webpack.NoEmitOnErrorsPlugin，其功能webpack4已经默认配置。同时，要设置

mode: 'development'
webpack.production.conf.js

webvpack4中改动最大，影响也最大的就是webpack4使用optimization.splitChunks替代了CommonsChunkPlugin。以前的CommonsChunkPlugin主要用来抽取代码中的共用部分，webpack runtime之类的代码，结合chunkhash，实现最好的缓存策略。而optimization.splitChunks则实现了相同的功能，并且配置更加灵活，具体解释可参考这篇文章，解释得很详细。

mode: 'production',
optimization: {
splitChunks: {
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
chunks: 'initial',
name: 'vendors',
},
'async-vendors': {
test: /[\\/]node_modules[\\/]/,
minChunks: 2,
chunks: 'async',
name: 'async-vendors'
}
}
},
runtimeChunk: { name: 'runtime' }
}

总结

总体来说本次升级还算顺利，不到一天搞定，目前感觉，打包速度大约优化了70%左右，同时打包后的代码体积也有了很大的优化，带来的效果很显著的。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

vue.js动态操作同级class

D3.js实现动态表盘效果

以上がvue cli を webapck4 にアップグレードする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。