web-dev-qa-db-ja.com

Webpackビルドとreact-scriptsビルド

Webpackの設定は次のようになっているとします

{
    entry: path.join(__dirname, 'src', 'index.js'),
    output: {
    path: path.join(__dirname, 'build'),
    filename: 'bundle.js'
},

webpackからのビルドは

enter image description here

そして、react-scriptsビルドからのビルド（静的にはcss、js、メディアが別々のフォルダに含まれています）

enter image description here

質問：webpackの反応スクリプト構築に対する特定の利点はありますか？ （パフォーマンスを含むがこれに限定されない）

[〜＃〜] note [〜＃〜]：package.jsonはこれを達成するために編集されます。

reactjswebpackreact-scripts
5
magpie

Webpackは、React以外のアプリケーションを備えた汎用のバンドラーです。前 create-react-app、ウェブには、新しいReact webpackをバンドラーとして使用するプロジェクトをセットアップする例がたくさんありました。非常に柔軟で、Reactアプリケーションが必要になります。Angular、Vue、NodeJS、さらにはWeb Assemblyでも機能します。

しかし、セットアップには時間がかかりました。 React + ES6コードをplan-Vanilla JSに変換できるように、その動作を理解して構成する必要があります。好みの出力構造を決定し、webpackを構成する必要があります。そして、ホットモジュールリロードとコード分割のサポートも自分で追加します。この間、上記のすべてをサポートするためにWebpackに必要な他のプラグインも追加する必要があります。

これは当然、Reactで始めていた人々に疲労をもたらしました。

したがって、facebookはwebpackを内部的に使用するcraを作成し、これらの基本を処理し、コードのReact部分に集中するのに役立つすべてのNiceツールを含むように事前構成されています。可能な限り、ユーザーが構成を変更すると、ビルドプロセスが中断する可能性があります。

それを除けば、craが使用する構造上の規則は、必要最低限​​のWebpackセットアップよりもパフォーマンスに影響を与えてはなりません。それは単なる慣習です。

あなたの質問は、create-react-appをいつ使用し、Webpackをいつ使用しますか？

初心者の場合は、Reactアプリに集中するときにcraに固執することをお勧めします。最終的には、craが内部で管理しているwebpack構成が、あなたがやりたいことをサポートしていない時が来るでしょう。非常に一般的な例は、コンポーネントライブラリを記述して他のアプリで再利用する場合です。これはcraでは実行できません（アプリ全体に関するものです:)）。その後、webpackに切り替えて学習を開始できます。

14
hazardous

react-scriptsは、すべてのwebpack構成をバックグラウンドで隠します。これの利点は、create-react-appが定期的に更新されるため、React、Webpack、Babelを簡単に最新の状態に保つことができることです。コミュニティは自動的に問題を修正します。

パフォーマンスの点では、react-scriptsまたはwebpackに関係なく同じである必要があります。

Webpackのみを実行する利点：

  • 環境を完全に制御

  • サーバー側レンダリングなどのカスタム処理を簡単に実行できます（create-react-appでも可能です）

  • スキルとしてのwebpackの知識

Webpackのみの欠点

  • Webpackの完全な更新とメンテナンス（一部のwebpackバージョンは後方互換性または将来の互換性がありません）

  • 素早く反応することを学ぼうとしていると、恐ろしくなり、頭痛の種になります。

create-react-appをカスタマイズする場合は、次の情報をご覧ください

https://auth0.com/blog/how-to-configure-create-react-app/

create-react-appを使用したサーバー側のレンダリングは次のとおりです

https://hackernoon.com/server-side-rendering-with-create-react-app-1faf5a9d1eff

TLDR：何らかの理由でできるだけ早く0〜100にしたい場合は、create-react-app/react-scriptsを使用します

ボンネットの下をいじるのが好きな人は、webpackを使用してください

8
Auriga