目次
はじめに
今回はWebpackでReactの開発環境を構築します。
create-react-appよりもカスタマイズがしやすくなるので、実務ではほぼこちらが採用されます。
create-react-appではなんとなく行っていた設定を、自分で行う必要があります。
方針
- 仕様はcreate-react-appに寄せる
- 設定はなるべく最小構成を目指す
手順
ファイルの作成
mkdir wepack-react-practice
cd wepack-react-practice
yarn init -y
mkdir src public
touch webpack.config.js src/index.js public/index.html上記のコマンドを上から順に叩きうまくいけば以下の様なディレクトリが作られているはずです。
wepack-react-practice
├── package.json
├── public
│ └── index.html
├── src
│ └── index.js
└── webpack.config.js以下の様にファイルを修正していきましょう
「/public/index.html」の修正
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>React × webpack</title>
</head>
<body>
<div id="root"></div>
<script src="main.js"></script>
</body>
</html>「/src/index.js」の修正
import React from 'react';
import ReactDOM from 'react-dom/client';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<h1>React × webpack</h1>
);「/webpack.config.js」の修正
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
options: {
presets: ['es2015', 'react']
}
}
]
}
};ライブラリのインストール
Reactのインストール
yarn add react react-domwebpackと他ライブラリのインストール
yarn add webpack webpack-cli webpack-dev-server --devbabelと他ライブラリのインストール
yarn add babel-loader@7 babel-core babel-preset-react babel-preset-es2015 --devこれでWebpack×React環境に必要な最低限のライブラリのインストールが完了しました。
開発環境の構築
コマンドの追加
{
"name": "wepack-react-practice",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
+ "scripts": {
+ "start": "webpack serve --mode development"
+ },
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "7",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"html-webpack-plugin": "^5.5.0",
"webpack": "^5.76.1",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.11.1"
}
}
上記の様にファイルを修正します。
確認
yarn start上記のコマンドでサーバーを立ち上げ、http://localhost:8080 にアクセスします。
下記の様な画面が出れば成功です。
本番環境の構築
コマンドの追加
{
"name": "wepack-react-practice",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"start": "webpack serve --mode development",
+ "build": "webpack --mode production"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
},
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "7",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"webpack": "^5.76.1",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.11.1"
}
}上記の様にファイルを修正します。
HTMLプラグインの追加
デフォルトの状態では/src/index.htmlをdist配下に書き出すことができません。
yarn add html-webpack-plugin --dev上記のコマンドでプラグインをインストールします。
+ const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
loader: 'babel-loader',
options: {
presets: ['es2015', 'react']
}
}
]
},
+ plugins: [
+ new HtmlWebpackPlugin({
+ template: './public/index.html'
+ })
+ ]
};これでビルド時にdist配下にindex.htmlが自動で書き出される様になりました。
yarn build上記のコマンドを叩いてください。
dist
├── index.html
├── main.js
└── main.js.LICENSE.txt「wepack-react-practice/dist」のディレクトリ構成が上記の様になっていれば成功です。
おまけ
あわせて読みたい
create-react-appからViteへ移行しアプリを高速化する
【はじめに】 今回はreact-create-appで作成したアプリをviteへ移行する方法を解説します。viteはビルド速度が爆速なのでおすすめです。公式はこちら→https://ja.vitejs...
