【2022年版】Node.js, React, Webpack 環境構築 #JavaScript

Reactの環境構築記事は沢山存在しているが、数年前の記事そのままでやっても、どこかしらでエラーがでてしまい上手くいかなかったりする。
自分用に最新版を作ってみた。
参考記事(2018年)：https://qiita.com/olt/items/11eb99a8961007ceb52f

ファイル構成は以下の通り

react_app/
  ├ package.json
  ├ webpack.config.js
  ├ index.html
  ├ App.js

アプリケーションディレクトリの作成

react_appという名前のディレクトリ上で作業を行う

mkdir react_app

react_appへ移動する

cd react_app

package.jsonを作成

npm init -yで、多くの項目がデフォルト値に設定された状態のpackage.jsonが作成できる。

package.jsonファイルを作成

package.json

{
  "name": "react_app",
  "version": "1.0.0",
  "description": "",
  "main": "App.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "start": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "html-webpack-plugin": "^5.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@babel/preset-env": "^7.18.6",
    "@babel/preset-react": "^7.18.6",
    "babel-loader": "^8.2.5",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.9.3"
  },
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
  }
}

package.jsonファイルでdependencyとdevDependency内に書いたパッケージをnpm installコマンドでまとめてインストールする。

terminal

npm install

webpackの作成

webpack.config.jsファイルを作成する

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins
const path = require('path');

module.exports = {
  mode: 'development',
  entry: path.resolve(__dirname, 'App.js'),
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'bundle.js'
  },
  devServer: {
    port: 3000,
    static: {
        directory: path.resolve(__dirname, "./dist"),
    }
  },
  resolve: {
    modules: [path.resolve(__dirname, "src"), "node_modules"],
    extensions: ['.js', '.jsx']
  },
  module: {
    rules: [
        {
         test: /\.js$/,
         exclude: /node_modules/,
         use: {
             loader: 'babel-loader'
         }
       }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './index.html'})
  ]
};

webpack-dev-serverのバージョンによってdevServerの部分の書き方が違ってくるので注意。（実際v3以前ではcontentBaseが使えるのに対して最新版のv4では使えない）

index.html, App.jsの作成

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <div id="root"></div>
</body>
</html>

App.js

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

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

アプリケーションのビルド

npm run build

成功すれば、webpack 5.73.0 compiled successfully in 1298 msというメッセージが表示され、distフォルダにindex.htmlとbundle.jsが作成されている。

アプリケーションの実行

npm start

webpack 5.73.0 compiled successfully in 1565 msというメッセージが表示されていたら成功。
http://localhost:3000/にアクセスしてHello, world!と表示される。