反応ウェブパックとは何ですか

react は、ユーザー インターフェイスの構築に使用される JAVASCRIPT ライブラリであり、webpack は、フロントエンド リソースの読み込み/パッケージ化ツールです。webpack は、モジュールの依存関係に基づいて静的分析を実行し、次に、指定されたルール、静的リソース。

このチュートリアルの動作環境: Windows7 システム、webpack3.0&&react16.4.0 バージョン、Dell G3 コンピューター。

推奨: react ビデオ チュートリアル

React は、ユーザー インターフェイスを構築するための JAVASCRIPT ライブラリです。

React は主に UI の構築に使用されますが、React を MVC の V (ビュー) だと思っている人も多いと思います。

React は、Instagram Web サイトを構築するための Facebook の内部プロジェクトとして誕生し、2013 年 5 月にオープンソース化されました。

React は高いパフォーマンスと非常にシンプルなコードロジックを備えているため、ますます多くの人が注目し、使用し始めています。

Webpack は、フロントエンドのリソース読み込み/パッケージ化ツールです。モジュールの依存関係に基づいて静的分析を実行し、指定されたルールに従ってこれらのモジュールに対応する静的リソースを生成します。

Webpack は、オープンソースのフロントエンド パッケージ化ツールです。 Webpack は、フロントエンド開発にはないモジュール型開発アプローチを提供し、さまざまな静的リソースをモジュールとして扱い、そこから最適化されたコードを生成します。 Webpackはターミナルから、またはwebpack.config.jsを変更することで様々な機能を設定することができます。 Webpack を使用する前に Node.js をインストールする必要があります。

webpack の主な目的は、ブラウザで使用できるように JavaScript ファイルをパッケージ化することですが、任意のリソース (リソースまたはアセット) を変換、バンドル、またはパッケージ化することもできます。

Webpack React 開発環境の構成

Webpack をインストールします: npm install -g webpack

Webpack は webpack というファイルを使用します。 config.js 設定ファイルを使用して JSX をコンパイルするには、まず対応するローダーをインストールします。 npm install babel-loader --save-dev

現在のプロジェクト ディレクトリにエントリ ファイルentry.js があり、Reactコンポーネントは、components/ ディレクトリに配置されます。コンポーネントは、entry.js によって参照されます。entry.js を使用するには、このファイルの出力を dist/bundle.js に指定します。Webpack の構成は次のとおりです:

var path = require('path');module.exports = {
    entry: './entry.js',
    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },    module: {
        loaders: [
            { test: /\.js|jsx$/, loaders: ['babel'] }
        ]
    }
}

resolve は、ファイル拡張子をインポートできることを指定します。たとえば、Hello.jsx のようなファイルは、import Hello from 'Hello' を使用して直接参照できます。

loaders babel-loader を指定すると、.js または .jsx 拡張子を持つファイルをコンパイルできるため、これら 2 種類のファイルで JSX と ES6 を自由に使用できます。

コンパイルの監視: webpack -d --watch

以上が反応ウェブパックとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。