Zenn
🐾

【学習ログ】webpackとBabelでReact開発環境構築

2022/07/10に公開
React
webpack
yarn
Babel
idea

はじめに

YouTubeのモダンJS講座(@しまぶーさん)を見終わったので、手元のなぐり書きメモを整理する
M1Macで、Homebrew、nodebrew、yarnはインストール済というところからのスタート

事前準備

ディレクトリを用意する

.
├── src
│   ├── bar.js
│   └── index.js
├── index.html
└── webpack.config.js

webpackのHP(https://webpack.js.org)下の方にあるコードをそれぞれファイルにコピペする

yarnによるプロジェクトの開始

ターミナルで作業ディレクトリ上に移動して、以下のコマンドを実行する

yarn init -y

package.jsonファイルが作成される

  • package.json: バージョン管理を行うところ
.
├── src
│   ├── bar.js
│   └── index.js
├── index.html
├── package.json
└── webpack.config.js

webpack

webpackをインストールする

yarn add -D webpack webpack-cli

yarnで何かしらインストールすると、node-modulesフォルダとyarn.lockファイルが作成される

  • node-modules: インストールしたものが入るところ
  • yarn.lock: ライブラリの依存関係が書かれているところ
.
├── node_modules
├── src
│   ├── bar.js
│   └── index.js
├── index.html
├── packagejson
├── webpack.config.js
└── yarn.lock

package.jsonの設定

インストールしたwebpackはnode_modulesのbinの中に入っていて、そのままだと実行時の記述が長くなるため、package.jsonファイルでscriptsを設定して簡単に実行できるようにする

"scripts": {
    "webpack": "webpack"
  },

インストール後

以下のコマンドを実行するとindex.jsとbar.jsがバンドルされてdistフォルダとbundle.jsファイルが作成される
ちなみに、どこのフォルダにどんな名前でファイルを作るかは、webpack.config.jsに書かれている

yarn webpack --mode=development

--mode=development: 開発用
--mode=production: 本番用

.
├── node_modules
├── dist
│   └── bundle.js
├── src
│   ├── bar.js
│   └── index.js
├── index.html
├── packagejson
├── webpack.config.js
└── yarn.lock

webpack dev server

webpack dev serverをインストールする

webpackを入れただけではファイルを編集するごとにバンドルし直しが必要となるため、webpack dev serverを入れて、ファイル変更がすぐにブラウザに反映されるようにする

yarn add -D webpack-dev-server

package.jsonの設定

実行時にわかりやすいようscriptsを変更する

"scripts": {
  "build": "webpack",
  "start": "webpack serve"
},

webpack.config.jsの設定

webpackを実行する際の--modeオプションを記載し、devServerの設定として実行場所のパスを指定する
講座ではdevServerの設定でcontentBaseを使っていたが、バージョンの違いでerrorが出たため以下の通り対処

module.exports = {
　// モードを記載
  mode: "development",
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  // devServer設定
  devServer: {
    static: {
      directory: path.resolve(__dirname, "dist"),
    },
  },

その他

index.htmlファイルを実行場所であるdistフォルダの中へ移動、それに伴いbundle.jsへのパスを修正すれば、設定完了

インストール後

以下のコマンドでwebpack dev serverを実行すると、localhost:8080が立ち上がる

yarn start

BabelとReact

Babelをインストールする

yarn add -D @babel/core @babel/preset-react babel-loader

Reactをインストールする

yarn add react react-dom

webpack.config.jsの設定

devServerの設定の下に以下を記述

module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: ["@babel/react"],
            },
          },
        ],
      },
    ],
  },

その他

index.jsの最初に以下を記述することで、React環境の完成！の、はず。

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

終わりに

正直、細かいところはまったく理解できてないけど、講座の説明が分かりやすすぎて「今何やってるのかさっぱりわからん...！」状態になることはなかったです。
あとは先に進みながら、そのうち細かいところも少しずつ理解できるようになりたい。

Discussion