Webpack+React入門

投稿日: 2022-04-20 2022-10-24
タグ: 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 そのエントリポイントになります。作る dev 保持する場所としてのフォルダ index.js ここで変更を加えます。また、 src バンドルを出力するwebpackのフォルダー。

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

The --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/'
      }
    }
    ]
  }
...

getdocs

13036