WebpackとBabelでReact.js 構築 設定

本日は『create-react-app』(CRA)を使用せずにReactアプリを構築したいと常に思っていた初心者向けの入門記事となっております。

注意点として、この記事を読んで下さってる皆様はReactをすでに精通していると思います、なのでこの記事ではReactコードについては説明は致しません、ご了承下さいませ。

事前準備と条件

• 当ブログの記事ではWindowsとなります。

• VS Codeを使用します。

• Node.js

• JavascriptおよびES6からES8の構文に関する基本的な知識

• React.jsの基礎に精通している

まずWebpackとは何かを理解してもらわなければいけません。

詳しくはこちらで解説しておりますので、まずは『Webpack』と『Babel』の基礎知識をある程度学びこの記事にお戻り下さい。

dev-k.hatenablog.com

それではwebpackとbabelを使ってReactプロジェクトをセットアップしていく方法を解説していきます

プロジェクト作成

プロジェクトをご準備下さい。

mkdir webpack-react

cd webpack-react

このプロジェクト『webpack-react』フォルダの直下にまた新しくフォルダの作成をします。

フォルダ名は任意でも構いません。

下記フォルダ名とし、この中で管理していきます。

mkdir react_test

cd react_test

プロジェクトの初期化をします、プロジェクトフォルダを作成し『npm』を使用してプロジェクトを初期化する必要があります。

『npm init 』ではいくつかの質問をされます、そのまま『Enter』で流すか『npm init -y』で質問をスキップさせます。

npm init -y

これにより、ルートフォルダーに『package.json』が作成されます。

プロジェクトの初期化が完了したので、Reactプロジェクト内でいくつかの必要のあるパッケージをインストールします。

npm i  react react-dom --save

npm i --save-dev webpack webpack-cli html-webpack-plugin webpack-dev-server babel-loader @babel/core @babel/preset-env 

沢山インストールしましたがどれも欠かせないものとなります。

それぞれのパッケージを１つずつ説明致します。

npm i react react-dom  --save

Reactで開発の際に欠かせないものです、jsxコードを使用してReactを記述できます。

webpack webpack-cli

Webpack 4.0以降では、コマンドライン操作用のパッケージは 『webpack-cli』という別パッケージで提供されておりますのでこちらをインストールします

WebpackライブラリですべてのJavaScriptコードを単一にバンドルし、アプリケーションを構築するためのものです。

html-webpack-plugin

Webpackでバンドルされた『JS』『HTML』『CSS』を表示する為に自動で生成するプラグインとなります。

設定などで独自のHTMLファイルテンプレートを指定も可能となります。

webpack-dev-server

開発目的でのみローカルWebサーバーでアプリケーションを提供するために必要となっており、リロードする機能を備えたクライアント側サーバーです。

babel-loader

WebpackでBabelを使用するのに必要なモジュールをインストールします。　

ローダーは、webpack用に構築されたノードベースのユーティリティであり、ソースコードの変換やモジュール化をするためのツールです。

@babel/core

Babel本体のモジュールとなります。

 @babel/preset-env 

BabelがES6、ES7、およびES8コードを(ブラウザが理解できるように)ES5にコンパイル(変換)するのに役立つプリセットとなります。

Babelでは複数のモジュールをインストールし組み合わせて扱います。

Webpack用の『Babel loader』は@がありません。

先頭に@が付いてるのと付いていないのがあるので気をつけて下さい。

package.jsonの設定

まずpackage.jsonの設定を先にする必要があります。

package.jsonでの設定はそこまで難しくはありません

本日は必要最低限の設定でいきます。

以下のように『package.json』ファイルのオブジェクト内にある『scripts』にコードを追加します。

"scripts": {
    "start": "webpack-dev-server --mode development",
    "build": "webpack --mode production"

  },

  "start": "webpack-dev-server --mode development",

npm startまたはnpm run startで実行されるスクリプトとなります。

Webpackの開発ローカルサーバーを『developmentモード』で実行致します。

Webpackを実行する際は必ずモードである(developmentやproduction)の設定はするようにしてください。

 "build": "webpack --mode production",

modeは現在どのモードにあるかをwebpackに通知し、webpackに通知するために渡さなかった場合はデフォルトで『production』になります。

『npm run build』で実行されるスクリプトでproductionモードで実行しバンドリングします。

Webpackの設定

Webpackでは『webpack.config.js』という設定ファイルで対象のファイルなどを指定していきます。

この設定ファイルは、拡張子が『.js』となっていることからも分かるように、JavaScriptファイルとして処理されます、このファイル内で『module.exportsオブジェクト』にプロパティを定義することで設定を行う仕組みとなっております。

Webpack構成を追加する必要があるため、ルートフォルダーに『webpack.config.js』ファイルを追加します。

ファイル名は必ずしもこの『webpack.config.js』ではなくても大丈夫です。

本日ではよくあるこのファイル名でいきます。

下記のように記述下さい

const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

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

resolve: {
    extensions: ['*', '.js', '.jsx'],
  },

plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],

}

こちらも１つずつ解説致します。

const path = require('path');

『path』はNode.jsネイティブユーティリティモジュールです。

通常の『npm』モジュールとは異なり、すでにNode.js内にあるためインストールする必要はありません。

絶対パスを参照する為にpatchを読み込みます。

『require() 』はJavaScriptのプログラムをブラウザ上で動作させるには この『require() 』によるモジュールの参照を解決した単一のJavaScriptファイルに変換する必要があるので使用します。

const HtmlWebpackPlugin = require('html-webpack-plugin');

HtmlWebpackPluginはWebpackでバンドルされたJSなどを表示させるために『HTML』ファイルを自動で生成させるプラグインです。

基本的には『require()』を使用しプラグイン『html-webpack-plugin 』を読み込んであげます。

entry: path.resolve(__dirname, './src/index.js'),

バンドルファイルを作るためentryを設定します。

『path.resolve』では、ファイルへのパスを表す適切な文字列を作成するメソッドを使用します。

ファイルのパスを指定し基準となるファイルになります。

Reactアプリケーションの最上位ファイルになり、アプリをDOMにレンダリングします。

index.jsが別のjavascriptファイルをインポートすると、それらもバンドルされます。

ファイルは『./src/index.js』を元にしてバンドルを行います。

または任意のファイルを指定可能です。

module: {
  rules: [ 
    {
   
      test: /\.(js|jsx)$/,  
      use: ['babel-loader'],    
      exclude: /node_modules/,   
    },
  ],
},

ここの設定を詳しく知るには、Loader(ローダー)を知る必要があります。

ローダーはパッケージインストール時に解説した通りとなります。

Webpackでは、ローダーを使用してファイルを事前に処理します。

ローダーを使用するには『 webpack.config.js 』を編集して設定します、設定はモジュールプロパティである『rules』プロパティの『test』・『use』プロパティを使用し設定します。

この２つのプロパティ以外にも複数あり設定は複雑となっております。

『test』は処理対象であるファイルの指定です、今回でしたら(js | jsx)ファイルです。

『use』は変換を行う為に使用するローダーの指定です『'babel-loader'』を指定します。

『exclude: /node_modules/』は処理対象のファイルに使用するローダーやオプションを指定します。

モジュール生成時にマッチしたとき、ルールを適用させるものです。

Reactファイルである『jsx』と『js』はbabelを使ってビルド致します。

  output: {
    path: path.resolve(__dirname, 'public'),
    publicPath: '/',
    filename: 'bundle.js',
  },

outputは出力先であるビルドディレクトリ(フォルダ)とバンドルされたファイルを設定する場所となります。

基本的によく扱うプロパティはこの『patch』でパスを指定します。

今回では、『patch.resolve』での指定です。 OSごとにパスが異なることを防ぐために設定します。

絶対パスとして変換をしてくれます。

絶対パスでの指定がなく、絶対パスがまだ生成されていない場合は、現在の作業ディレクトリが使用されま ます。

『publicPatch』はパッケージによって生成されたindex.htmlファイル内の参照されたリソースのプレフィックスを示します。

ビルド時にHTMLファイル内のURLを更新していきます。

『filename: 'bundle.js',』ビルド時にバンドルされたファイル名となります。

  resolve: {
    extensions: ['*', '.js', '.jsx']
  },

このオプションで指定された拡張子のファイルは import の際に拡張子を省略することが可能となるのでこちらを設定しました。

plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html',
    }),
  ],

『HtmlWebpackPlugin』の設定です。

先程のは読み込みですが、こちらは『new演算子』で 『HtmlWebpackPlugin 』プラグインのインスタンスを生成し必要に応じて引数にオプションを指定していきます。

今回はHTMLの『template』を指定します。

『src』にある『index.htmlファイル』です。

Babelの設定

Babelの設定をしなければいけません。

『.babelrc』という名前のBabelファイルを生成し、下記のように記述してください。

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

ReactはすべてJavaScriptではないため、『.jsx』ファイルであるReact構文をサポートする必要性があります。

したがって、コードをトランスパイルするために、これら依存関係を追加します。

HTMLファイルの生成

ここで先にReactで使用するHTMLファイルを『./src/index.html』として生成して下さい。

<!DOCTYPE html>
<html lang="ja">
  <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>Hello</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

当記事では(div id="root" div)中にReactを追加していきます。

エントリポイントであるReactファイルを生成します 『index.js』を生成下さい。

このファイルが起点となるルートファイルです。

※この記事はReact v18以前に投稿された記事となります、最新のv18ではルートファイルの書き方は修正され変わっております。

詳しくはこちらで解説しておりますので参考下さい。

dev-k.hatenablog.com

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'

ReactDOM.render(<App />, document.getElementById('root'));

HTMLで指定したid『root』を取得し、React DOMで管理をします。

それでは親コンポーネントであるReactの関数コンポーネントファイル『App.jsx』作成しましょう。

import React from 'react';

const App = () => {
    return(
        <div><h1>My new React App</h1></div>
    )
}

export default App;

ここまでのディレクトリ構成は下記の通りです。

/📁webpack-react
/📁react_test
 ├📁node_modules
        ├依存関係
/📁src
 ├ App.jsx
 ├ index.html
 ├ index.js
.babelrc
package.look.json
package.json
webpack.config.js
     

下記コマンドを使用し、これまで設定してきたのがしっかり動作するか確認致します。

npm start

DEMO

『package.josn』のscriptsで設定した 『 "start": "webpack-dev-server --mode development",』にオプションで『--open』の設定を追加すれば『npm start』実行時に自動でブラウザが起動するようになります。

『localhost: 8080』で表示されてるか確認がとれましたら『package.josn』のscriptsで設定した

『 "build": "webpack --mode production",』

このbuildコマンドを使用します。

buildする前に開発サーバーは一度止めておきましょう。

npm run build

ビルドディレクトリの設定はoutputで『public』として指定したので

buildすると自動で『public』フォルダが生成されます。

このpublicフォルダは公開用となります。

『public』内にはHTMLファイルと1つのJSファイルとしてバンドルされたのを確認できたかと思います。

<script type="text"src='/react_test/public/bundle.js'></script> 

これらは非常に基本的な設定ですが、ローダーとプラグインを追加して、必要に応じて設定する方法がわかります。

高度な機能と、それをWebpackで機能させる方法については、別途今後の記事で詳しく説明していきます。

これらをさらにご自身でカスタマイズしたい場合は、webpackのドキュメントから詳細を確認して、その方法について得ることができます

webpack

本日は以上となります。

最後まで読んで頂きありがとうございました。