Webpack+React入門

このチュートリアルのこの目的は、Webpackを使用してバンドルされたReactアプリケーションの開発環境をセットアップすることです。 Webpackや他のバンドラーのメリットは継続的に比較されていますが、このチュートリアルではWebpackの使用を開始し、自分で決めるのに役立ちます。

依存関係

まだお持ちでない場合は、nodeとnpmをインストールする必要があります。これらの2つのツールを使用すると、package.jsonを介して依存関係を管理できます。ルートプロジェクトフォルダーで、npm initを実行し、セットアップの質問に答えてpackage.jsonをセットアップします（デフォルトの答えはほとんどのユーザーで機能するはずです）。

さらに、ReactとWebpack用のノードライブラリに加えて、変換用のライブラリが必要になります。これは、ルートフォルダにあるときに一連のコマンドを使用して実行できます。

npm install --save react react-dom create-react-class webpack
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

ファイル構造

Webpackは、entryポイントから開始して機能します。ここから、Webpackは、importおよびrequireステートメントを調べて、プログラムを実行するために含める必要のあるモジュールのアプリケーションの依存関係チャートを作成します。私たちにとって、index.jsがそのエントリポイントになります。変更を加えるindex.jsを保持する場所として、devフォルダーを作成します。バンドルを出力するためのwebpack用のsrcフォルダーも必要です。

mkdir dev src && touch dev/index.js

これで、index.jsにデモコードを入力できます。

Index.js

var React = require('react');
var ReactDOM = require('react-dom');
var createReactClass = require('create-react-class');

var Index = createReactClass({
  render: function() {
    return (
      <div>
        <p>Webpack and React!</p>
      </div>
    );
  }
});
ReactDOM.render(<Index />, document.getElementById('app'));

index.html

Webパッキングを続行する前に、バンドルがロードされる実際の場所が必要です。これはindex.htmlで発生します。これはルートディレクトリで作成する必要があり、コードは次のとおりです。

index.html

<html>
  <head>
    <meta charset="utf-8">
    <title>React and Webpack</title>
  </head>
  <body>
    <div id="app" />
    <script src="src/bundle.js" type="text/javascript"></script>
  </body>
</html>

ファイル構造は次のようになります。

.
├── dev
│   └── index.js
├── index.html
├── package.json
└── src

webpack.config.js

次に、webpack.config.jsファイルを設定します。これは、webpackが使用可能なバンドルを出力するために必要なすべての情報です。

webpack.config.js

var webpack = require("webpack");
var path = require("path");

var DEV = path.resolve(__dirname, "dev");
var OUTPUT = path.resolve(__dirname, "src");

var config = {
  entry: {
    Index : DEV + "/index.js"
  },

  output: {
    path: OUTPUT,
    filename: "bundle.js",
  },


  module: {
    loaders: [{
      include: DEV,
      test: /\.js$/,
      exclude: /node_modules/,
      loader: "babel-loader",
      query: {
        presets: ['es2015', 'react']
      }
    },
    ]
  }

};

module.exports = config;

entryはWebpackに開始場所を指示し、loadersはWebpackにそのファイル拡張子の処理方法と処理方法を指示し、outputはどこにどのように書き込むかを指示します。バンドル。

梱包

すべてが整ったので、アプリの動作を確認できるはずです。 ./node_modules/.bin/webpack --watchを実行すると、数秒で次のように表示されます。

➜  demo ./node_modules/.bin/webpack --watch   

Webpack is watching the files…

Hash: 1594ffb6ae2044c83abe
Version: webpack 3.7.1
Time: 1477ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  863 kB       0  [emitted]  [big]  Index
  [15] ./dev/index.js 468 bytes {0} [built]
    + 33 hidden modules

--watchオプションを使用すると、保存時に更新できます。変更を加えて保存すると、ブラウザでindex.htmlをリロードすると、新しい変更が自動的にリロードされます。

また、コンパイルコマンドにaliasを作成すると、少なくともいくつかのタブ補完が保存されます：alias output="./node_modules/.bin/webpack"

別のローダーの例

これは別のローダーfile-loaderで、画像拡張子の付いたファイルをimagesというフォルダーにバンドルするために使用できます。 loadersとその構成の詳細についてはこちらをご覧ください。

...
 module: {
    loaders: [{
      include: DEV,
      test: /\.js$/,
      exclude: /node_modules/,
      loader: "babel-loader",
      query: {
        presets: ['es2015', 'react']
      }
    },
    {
      test: /\.(jpe?g|png|gif)$/i,
      loader:"file-loader",
      query:{
        name:'[name].[ext]',
        outputPath:'images/'
      }
    }
    ]
  }
...