vue cli+webapck4 に必要な手順

今回は、vue cli+webapck4 に必要な手順と、vue cli+webapck4 の注意点について説明します。以下は実際のケースです。

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

新機能

0 構成

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

モード選択モード

モードには、プロダクションと開発の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

結局のところ、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' }
}

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

推荐阅读：

使用mint-ui在手机端做出三级联动

怎样发布vue+todo-list应用

以上がvue cli+webapck4 に必要な手順の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。