【React】Webpack を使って実行可能htmlを作成する

2021-11-21

Uncategorized

560 words

React は基本的にWebサーバが無いと動作しないですが、Webpack をすると実行可能なhtmlを作成することができます。

Electron とも相性がよく、React を Electron で表示させることができます。今回はその前段階として Webpack を使ってみたいと思います。

はじめに

Windows 10 Home 21H1
Node.js 14.17.2
React 17.0.2
Babel 7.16.0
Webpack 5.64.2

手順

プロジェクトの準備

まず初めに適当な作業フォルダを作り、下記コマンドで Node.js を初期化します。

1	npm init -y

そうすると「package.json」が出来上がります。

npm init

ライブラリのインストール

下記コマンドで React と Webpack をインストールします。

1 2	npm install --save react react-dom npm install --save-dev webpack webpack-cli html-webpack-plugin babel-loader @babel/core @babel/preset-env @babel/preset-react @babel/plugin-syntax-jsx

package.json の設定

scripts に下記コマンドを追加して npmコマンドでビルドできるようにします。

"scripts": {
  "build": "webpack --progress --mode development",
  "prod": "webpack --progress --mode production"
},

React scripts

Webpack の設定

プロジェクトフォルダの直下に「webpack.config.js」という名前でJSファイルを作り、下記コードを貼り付けます。

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist/'),
        publicPath: './',
        filename: 'index.js'
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                use: ['babel-loader'],
                exclude: /node_modules/,
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
            filename: 'index.html',
        }),
    ],
    optimization: {
        minimize: false,
    },
    devtool: "source-map"
};

Babel の設定

プロジェクトフォルダの直下に「babel.config.js」という名前でJSファイルを作り、下記コードを貼り付けます。

module.exports = {
    "presets": ["@babel/preset-env", "@babel/preset-react"],
    "plugins": ["@babel/plugin-syntax-jsx"]
}

html の作成

プロジェクトフォルダに「src」フォルダを作って、その中に「index.html」を作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

React の作成

srcフォルダ内に「index.js」を作成します。

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

class App extends React.Component {
    render() {
        return (
            <h1>Hello World!</h1>
        );
    }
};
ReactDOM.render(<App />, document.getElementById('root'));

動作確認

最終的にこのようなファイル構成になると思います。

React ファイル構成

下記コマンドで React を Webpack して 1つのファイルにします。

1	npm run build

Webpack に成功すると「dist」というフォルダに、静的ファイルとして index.html とそれに必要なファイルが出力されます。

React dist

あとは distフォルダの「index.html」を実行すれば React で作った Webページが表示されます。

React index

Archives

Tags