webpack5でReact環境構築

September 17th, 2021

webpack5でReactの環境構築

動機

最近のフロントエンド...Hello Worldするまでに時間がかかり過ぎる...とりあえずboilerプレートを用意したい...というのがこの記事を書いた動機です。

また、以下の人にも参考になるかと思います😏

webpackの仕組みをコードを書いてざっくり知りたい。
webpackの設定をES6以降のJSで書きたい。
webpackでReactの環境構築をしたい。(create-react-app脱出したい。)

事前準備

nodeのバージョン

v12.17.0

yarnを使います

必要であればnpmコマンドや、npxコマンドに置き換えてください。

ディレクトリを作成

$ mkdir webpackReact
$ cd webpackReact
$ mkdir front_end
$ touch front_end/base.html

HTMLファイルを作成

base.html

最終的にはこのHTMLにビルドされたReactのJSを読み込ませます。

<!DOCTYPE html>
<html lang="en">
  <head>
      <meta charset="utf-8">
      <title>Webpack React</title>
  </head>
  <body>
      <div id="root"></div>
  </body>
</html>

package.jsonを作成

$ npm init -y

Babel

@babel/core

babel本体。
@babel/runtime

よく使われる関数に対して、都度ヘルパー関数を生成する。
@babel/plugin-transform-runtime

@babel/runtimeがある前提で利用していく。再利用可能なヘルパーをインポートする形に変換するプラグイン。分かりやすい記事
@babel/preset-env

ES2015+をトランスパイルしてくれる。
@babel/regiser

ES2015以降で書けるようにしてくれる。 nodeのrequireをフックし、ファイルを読み込む前にbabelでトランスパイルする。 webpackの設定ファイルをES2015以降で書きたいので利用。
@babel/preset-react

Reactをコンパイルするために必要。
babel-loader

webpackでBabelを使ってJSをコンパイルするために利用。 .babelrcを読み込んでくれる。

$ yarn add -D @babel/core @babel/runtime @babel/plugin-transform-runtime @babel/preset-env @babel/register babel-loader @babel/preset-react

.babelrc

BabelがどのようにJSのコードを変換するのかを設定します。ワーキングディレクトリのルートに .babelrc を作り情報を追記する。

$ touch .babelrc

// Babelでは変換対象のモジュールのことをプリセットと呼ぶ。
{
  "presets": [
    // ECMAScriptのバージョンを指定するためのプリセット。
    // 特に指定がないならes5の構文に変換してくれる。
    "@babel/preset-env",
    // Reactのコードをコンパイルする。
    "@babel/preset-react"
  ]
}

React

react
react-dom

$ yarn add react react-dom

JSファイルを作成

$ touch front_end/entry.js

entry.js

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

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

$ touch front_end/App.js

App.js

import React from "react";

const App = () => <h1>Hello World！</h1>;
export default App;

webpack

webpack
webpack-cli
webpack-dev-server
html-webpack-plugin

$ yarn add -D webpack webpack-cli webpack-dev-server html-webpack-plugin

この時点でのpackage.jsonの内容

こんな感じになってればOKです。

{
  "name": "webpack react",
  "version": "1.0.0",
  "main": "entry.js",
  "scripts": {
    "development": "webpack server --env=development"
  },
  "devDependencies": {
    "@babel/core": "^7.14.6",
    "@babel/plugin-transform-runtime": "^7.14.5",
    "@babel/preset-env": "^7.14.7",
    "@babel/preset-react": "^7.14.5",
    "@babel/register": "^7.14.5",
    "@babel/runtime": "^7.14.6",
    "babel-loader": "^8.2.2",
    "html-webpack-plugin": "^5.3.2",
    "webpack": "^5.45.1",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}

これで事前準備は完了しました。

あとはwebpackの設定をどう書くかによって色々変わります。

webpackを使いビルド

ビルド(.babel.js拡張子ファイルに設定を書く)

bable-registerがあれば、webpack.config.babel.jsファイルでES6を利用できます。(拡張子が .babel.jsであればES6を利用できるようになる。) なぜかと言われるとややこしいのですが、webpackの内部でinterpretというライブラリがあり、 .babel.js という拡張子に対してはbabel-register で変換してくれるようになっています。

以下のように環境ごとにファイルを設定してみるのもOK

webpack.config.dev.babel.js

webpack.config.prod.babel.js

package.json

scriptsに実行内容を記述します。

  ...
  "scripts": {
    "development": "webpack server --config webpack.config.dev.babel.js",
    "build:development": "webpack --config webpack.config.dev.babel.js"
  },
  ...

webpack.config.dev.babel.js

$ touch webpack.config.dev.babel.js

パターン1の development.js と全く同じコードを書きます。

webpack serverで起動して http://localhost:8080 にアクセス。

$ yarn run development

webpackでビルドして base.htmlをブラウザで表示。

$ yarn run build:development

Tech Boyaki