5分で作る React ⁺ webpack の本当にシンプルな構成

実用性はないですが、React + webpack の最小の構成を5分で作成します。

※ホットリロードは設定しないので、React のコードを変更するたびにビルドコマンドを手動実行する必要があります。

手順

プロジェクトのディレクトリを作成する

mkdir react-test && cd "$_"

cd “$_" で、作成したディレクトリに移動します。

プロジェクトを初期化する

npm init -y

必要なモジュールをinstallする

npm install react react-dom
npm install -D webpack webpack-cli @babel/core @babel/preset-env @babel/preset-react babel-loader

webpack の構成ファイルを作成する

touch webpack.config.js

webpack.config.js の中身は以下。

const path = require('path')
const webpack = require('webpack')

module.exports = {
  entry: path.resolve(__dirname, './src/index.js'),
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
    ],
  },
  resolve: {
    extensions: ['*', '.js', '.jsx'],
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js',
  },
}

Babelの設定ファイルを作成する

touch .babelrc

.babelrc の中身は以下。

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

ソースコードを作成する

import React from 'react';
import ReactDOM from 'react-dom';

import App from './App';

const name = 'tamibouz';

ReactDOM.render(
  <App name={name} />,
  document.getElementById('app')
);

import React from 'react'

const App = ({ name }) => <div>Hello {name}!!</div>

export default App

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reactテスト</title>
</head>
<body>
    <div id="app"></div>
    <script src="./bundle.js"></script>
</body>
</html>

package.json の scripts にビルドコマンドを追加

{
  (...略)
  "scripts": {
    "build": "webpack build --mode production",
    "dev": "webpack build --mode development"
  },
  (...略)
}

ビルドする

以下のコマンドを実行してビルドする。

src 配下の js ファイルを元に、dist/bundle.js が作成される。

// 以下のコマンドのどっちでも良い。作成される dist/bundle.js の中身が少し変わる(本番用は圧縮される)

// 開発用ビルド
npm dev

// 本番用ビルド
npm build

Webサーバーで動かす

Web Server for Chrome を使って、dist ディレクトリを指定してWebサーバーを立ち上げる。

Web Server URL(s) の URL をブラウザで開く。下の場合は http://127.0.0.1:8887。

画面が表示されることを確認。終了。

実際に起きていること

src 配下に作成したコードは React で書かれている。

これをブラウザが認識できる形に変換する必要がある。

そこで登場するのが Babel。

Babel は @babel/preset-react を元に、 React のコードをブラウザが認識できる JavaScript のコードへ変換する。

変換後に、webpack によってindex.jsとApp.jsが一つにファイルにマージされる。

webpack は複数の依存関係があるファイルを一つのまとめることが仕事。

ついでに、webpack に babel-loader を渡すと、webpack が Babel の変換、ひとつのファイルにマージ、という一連の処理をやってくれる。(多くの場合ではそうしている)

作成された bundle.js は、index.html の script タグで読み込まれているので、ブラウザが bundle.js を実行して、画面が表示される。

React, webpack

Posted by たみぼうず