2018年度版、React、webpack、Babelのセットアップ手順をアップデートしてみた

はじめに

こんにちは、Udemyプログラミング講師のはむです。
もう既に大勢の方が殺到している毎年恒例のUdemyのブラックフライデーが今年も始まりました。プログラマに限らず様々なジャンルのコースが大特価でご購入頂けますので是非この機会にお買い求めください。
もちろん、私のGraphQLやReactのコースも絶賛セール中ですのでもしこれから始めてみよう！という方は是非ご検討頂ければと思います。

さて、宣伝はこのくらいにして、この記事では、タイトルにも記載の通りにはなりますが、create-react-appでさくっと作ってしまっては見えてこないReact、webpack、Babelの設定及びセットアップの手順を敢えてマニュアルで行い、より理解を深めようという狙いのもとまとめたものです。

セットアップ

では、丁寧にまとめていきますので少し長めの記事になりますが、やっていきたいと思います。以降、基本的には「実行内容」あるいは「書く内容」を示した後に「解説をする」という形式で進めていきますので宜しくおねがいします。

$ node -v
v8.12.0

まずnodeのバージョンを確認しておきます。

今回の作業で使用したnodeのバージョンはv8.12.0になります。

作業ディレクトリの作成

$ pwd
/Users/ham/git
$ mkdir setup-react-webpack-babel
$ cd $_
$ pwd
/Users/ham/git/setup-react-webpack-babel

まずはReactアプリケーションを開発するためのプロジェクトディレクトリを作成しそこへ移動します。少し補足しますと、$_はBashの特殊変数の1つで過去の直近のコマンドの最後の引数を示します。

npmによる初期化

$ npm init -y
Wrote to /Users/ham/git/setup-react-webpack-babel/package.json:

{
  "name": "setup-react-webpack-babel",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

次にnpmコマンドでpackage.jsonファイルを作成します。

これを作成して、以降の工程で必要となるモジュールを追加していきます。

npm initと入力して、ここではデフォルトの内容のまま進めますので、-yオプションをつけてエンターキーを押下します。

git initの実施及びcommit

$ git init
Initialized empty Git repository in /Users/ham/git/setup-react-webpack-babel/.git/
$ git add . && git commit -m 'init'
[master (root-commit) 6e73723] init
 1 file changed, 12 insertions(+)
 create mode 100644 package.json

次にこれはお好みで構いませんが、git commitをしておきます。

これは何か間違った操作をしたときにロールバックできるようにするためです。

webpackのインストール

$ npm install --save-dev webpack

> fsevents@1.2.4 install /Users/ham/git/setup-react-webpack-babel/node_modules/fsevents
> node install

[fsevents] Success: "/Users/ham/git/setup-react-webpack-babel/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN setup-react-webpack-babel@1.0.0 No description
npm WARN setup-react-webpack-babel@1.0.0 No repository field.

+ webpack@4.25.1
added 383 packages from 298 contributors and audited 4147 packages in 12.131s
found 0 vulnerabilities

package.jsonが設置できましたので、packageをインストールしていきます。

最初にwebpack をインストールします。

webpackの目的はモジュールバンドリングになります。

これから作成するReactアプリケーションで必要となる各種モジュールを1つのファイルに統合する役割があります。

これは開発時のみに行う作業になりますので、オプションは--save-devを指定することになります。

$ git status
On branch master
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)

        modified:   package.json

Untracked files:
  (use "git add <file>..." to include in what will be committed)

        node_modules/
        package-lock.json

no changes added to commit (use "git add" and/or "git commit -a")

git stを実行してみると、webpackをインストールすることでpackage.jsonが書き換わり、node_modules配下にパッケージがインストールされたことが分かります。

さらに、最初のパッケージをインストールしたことで、package-lock.jsonファイルも新たに生成されていることが分かります。

.gitignoreの取得及び設置

ここで、git によるとnode_modulesディレクトリが差分として表示されるんですけれども

node_modulesへの変更については追跡対象とはしないのがNode開発の通例です。

なので、このnode_modulesを.gitignoreに追加したいところですが、

ここでは、Nodeの開発においての.gitigroreファイルのテンプレートとしてGitHubで用意されているものを利用しようと思います。

Google検索でgithub .gitignore nodeで検索すると

のGitHubが所有するNodeの.gitignoreファイルが見つかると思います。

こちらのページのRawボタンをクリックすると

にアクセスできると思います。

こちらのURLをコピーしてターミナルに戻ります。

$ wget -O .gitignore https://raw.githubusercontent.com/github/gitignore/master/Node.gitignore
--2018-11-17 01:50:38--  https://raw.githubusercontent.com/github/gitignore/master/Node.gitignore
Resolving raw.githubusercontent.com (raw.githubusercontent.com)... 151.101.72.133
Connecting to raw.githubusercontent.com (raw.githubusercontent.com)|151.101.72.133|:443... connected.
HTTP request sent, awaiting response... 200 OK
Length: 1105 (1.1K) [text/plain]
Saving to: ‘.gitignore’

.gitignore                                           100%[====================================================================================================================>]   1.08K  --.-KB/s    in 0s

2018-11-17 01:50:38 (87.8 MB/s) - ‘.gitignore’ saved [1105/1105]

次にwgetコマンドで-Oオプションをつけて 保存する名前を指定します。

保存名は.gitignoreとします。

先程のURLを引数にしてenterキーを押します。

$ git status
On branch master
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)

        modified:   package.json

Untracked files:
  (use "git add <file>..." to include in what will be committed)

        .gitignore
        package-lock.json

no changes added to commit (use "git add" and/or "git commit -a")

取得できたら、再度git ignoreで差分を確認しましょう。

ご覧のようにnode_modulesが消えました。

取得した.gitignoreが効いていることが分かります。

一応、.gitignoreの中身を覗いてみると、

node_modules/

があるのが分かりますね。

こいつが効いているということです。

$ git diff
diff --git a/package.json b/package.json
index 26977f9..dcee082 100644
--- a/package.json
+++ b/package.json
@@ -8,5 +8,8 @@
   },
   "keywords": [],
   "author": "",
-  "license": "ISC"
+  "license": "ISC",
+  "devDependencies": {
+    "webpack": "^4.25.1"
+  }
 }

次にgit diffコマンドを実行します。

ご覧のようにwebpackがdevDependenciesに追加されていることが分かります。

$ git add . && git commit -m 'add webpack'
[master 2811463] add webpack
 3 files changed, 3698 insertions(+), 1 deletion(-)
 create mode 100644 .gitignore
 create mode 100644 package-lock.json

では、意図通りの変更ができていますので、commit をしておきましょう。

git add して git commit -m 'add webpack'とします。

$ npm install --save-dev webpack-cli
npm WARN setup-react-webpack-babel@1.0.0 No description
npm WARN setup-react-webpack-babel@1.0.0 No repository field.

+ webpack-cli@3.1.2
added 70 packages from 15 contributors and audited 4258 packages in 8.022s
found 0 vulnerabilities

次にwebpack-cliもインストールします。

これはコマンドラインからwebpackを実行するためのパッケージです。

$ git add . && git commit -m 'add webpack-cli'
[master ccab865] add webpack-cli
 2 files changed, 578 insertions(+), 1 deletion(-)

こちらについては特に確認するポイントはありません。

パッケージがインストールできたらcommitしておきましょう。

では、次にwebpackの実行を行ってみます。

先程申し上げたようにwebpack-cliをインストールしていますので

コマンドラインからwebpackが実行できます。

では、実行してみましょう。

$ npx webpack

Insufficient number of arguments or no entry found.
Alternatively, run 'webpack(-cli) --help' for usage info.

Hash: 4fcb6a9efff8c913304b
Version: webpack 4.25.1
Time: 88ms
Built at: 2018-11-17 23:22:39

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

ERROR in Entry module not found: Error: Can't resolve './src' in '/Users/ham/git/setup-react-webpack-babel'

このプロジェクトにインストールしたwebpackを実行したいのでwebpackの前にnpxをつけます。

enterキーを押すと、、、

WARNINGとERRORが発生しました。

まずはERRORの方を見ていきましょう。

ERROR in Entry module not foundとあります。

これはEntry moduleが見つからないということなのですが、これはこちらのページに詳しく説明されています。

こちらのwebpackの設定についてのページの冒頭で、Out of the box, webpack won't require you to use a configuration file. However, it will assume the entry point of your project is src/index and will output the result in dist/main.js minified and optimized for production.とあります。

要約すると、

とりあえず設定ファイルは無くても動くんだけど、webpackではentry pointというのが想定されていて
デフォルトだとsrc/index.jsになるんです。
そして、それがminifyされてdist/main.jsに出力されるんです。

ということなのですが、つまり、先程のエラーはsrc/index.jsが無いからbundleできませんよー！という意味になるんです。

$ mkdir src
$ touch src/index.js

ということなので、

srcディレクトリを作成して、その下にindex.jsを作成します。

diff --git a/src/index.js b/src/index.js
index e69de29..c60b0b4 100644
--- a/src/index.js
+++ b/src/index.js
@@ -0,0 +1 @@
+console.log("Hello, webpack!")

で、そのindex.js にconsole.logを追加しておきます。

"Hello, webpack!"という文言でも入れておきます。

では、ここでもう一度先程のwebpackコマンドを実行してみましょう。

$ npx webpack
Hash: 46295a2ced7e8f80a23a
Version: webpack 4.25.1
Time: 137ms
Built at: 2018-11-17 23:46:23
  Asset       Size  Chunks             Chunk Names
main.js  960 bytes       0  [emitted]  main
Entrypoint main = main.js
[0] ./src/index.js 31 bytes {0} [built]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/

今度はERRORが消えています。

正常にentry pointがloadされたようです。

で、残っているのはこちらのWARNINGです。

言われているのは、

modeオプションが指定されていません。
この場合は、とりあえずproductionという想定でbundleします。
modeについては、development、productionのいずれかを環境に応じて設定するようにしてください。
詳細は、https://webpack.js.org/concepts/mode/ をご確認ください。

ということです。

warningが出て気持ちが悪いので、defaultのproductionをmodeに指定してもう一度実行してみます。

$ npx webpack --mode=production
Hash: 28a19fcf5678a6ef0598
Version: webpack 4.25.1
Time: 136ms
Built at: 2018-11-17 23:52:19
  Asset       Size  Chunks             Chunk Names
main.js  960 bytes       0  [emitted]  main
Entrypoint main = main.js
[0] ./src/index.js 31 bytes {0} [built]

今度はWARNINGも消えましたね。

$ git status
On branch master
Untracked files:
  (use "git add <file>..." to include in what will be committed)

        dist/
        src/

nothing added to commit but untracked files present (use "git add" to track)

git statusを実行するとdistディレクトリが作成されていることが分かります。

$ cat dist/main.js

生成されたoutputファイルを覗いてみましょう。

!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||
Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e
,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",
{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function()
{return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t){console.log("Hello, webpack!")}]);

内容はご覧のようにminifyされ、末尾の方に"Hello, webpack!"のconsole.logがあることが確認できました。

webpackの動作としては問題無さそうです。

buildタスクの作成

diff --git a/package.json b/package.json
index afe663d..7edf2b5 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "webpack --mode=production"
   },
   "keywords": [],
   "author": "",

次にbuildタスクを追加します。

先程はwebpackの動作確認をするために直接terminalにコマンドを打ち込みましたがこれをnpmコマンドのタスクとして登録しておきます。

名前はbuildという名前にします。

ここで記入するコマンドはこのプロジェクト内のパッケージを使用することが前提となりますのでnpxは不要です。

testタスクは今回は不要なので削除してしまいます。

では、タスクの動作確認も行っておきましょう。

$ rm -rf dist
$ npm run build

> setup-react-webpack-babel@1.0.0 build /Users/ham/git/setup-react-webpack-babel
> webpack --mode=production

Hash: 28a19fcf5678a6ef0598
Version: webpack 4.25.1
Time: 134ms
Built at: 2018-11-18 00:15:13
  Asset       Size  Chunks             Chunk Names
main.js  960 bytes       0  [emitted]  main
Entrypoint main = main.js
[0] ./src/index.js 31 bytes {0} [built]

$ cat dist/main.js

再度確認してみます。

!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||
Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e
,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",
{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function()
{return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t){console.log("Hello, webpack!")}]);

taskによるbuildでも同じ様にbundleされた結果が出力されましたね。

$ git st
On branch master
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)

        modified:   package.json

Untracked files:
  (use "git add <file>..." to include in what will be committed)

        dist/
        src/

no changes added to commit (use "git add" and/or "git commit -a")

distディレクトリは副次的な成果物になるので.gitigrenoに追加しておきます。

$ echo /dist >> .gitignore
$ git add .

echo で追加しておきます。

diff --git a/.gitignore b/.gitignore
index e1da6ae..6680859 100644
--- a/.gitignore
+++ b/.gitignore
@@ -74,3 +74,4 @@ typings/

 # FuseBox cache
 .fusebox/
+/dist
diff --git a/package.json b/package.json
index afe663d..7f6ef18 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "webpack --mode=production"
   },
   "keywords": [],
   "author": "",
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 0000000..c60b0b4
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1 @@
+console.log("Hello, webpack!")

以上の変更をcommit しておきましょう。

$ git commit -m "add build task"

Babelのインストール

次にBabelをインストールします。

こちらがBabelの公式ページになります。

BabelはtranspilerといってJavaScriptの新しい記法を標準的な記法に正規化してくれるツールです。

このtranspilerによって、モダンな記法で書いたJavaScriptのコードが、どのブラウザでも実行可能な形式に変換されるというわけです。

画面上部にあるSetupをクリックします。

すると、ここでは様々なユースケースにおけるbabelのセットアップの方法をウィザード形式で案内してくれます。

まずはステップ1です。

今回はwebpackによるビルドが前提になりますので、Webpackのボタンをクリックします。

すると、ステップ2に移動します。

$ npm install --save-dev babel-loader @babel/core
npm WARN setup-react-webpack-babel@1.0.0 No description
npm WARN setup-react-webpack-babel@1.0.0 No repository field.

+ @babel/core@7.1.6
+ babel-loader@8.0.4
added 42 packages from 28 contributors and audited 4495 packages in 7.109s
found 0 vulnerabilities

ここで案内されているように、babel-loaderと@babel/coreのインストールをします。

babel-loaderはwebpackによるバンドルの実行前にトランスパイルを実行させるために必要となるパッケージです。

そして、このbabel-loaderを実行するために必要となるのが@babel/coreです。

全て開発時に必要となるパッケージですので--save-dev付きでインストールします。

$ npm install --save-dev @babel/preset-env @babel/preset-react
npm WARN setup-react-webpack-babel@1.0.0 No description
npm WARN setup-react-webpack-babel@1.0.0 No repository field.

+ @babel/preset-react@7.0.0
+ @babel/preset-env@7.1.6
added 79 packages from 14 contributors and audited 5663 packages in 7.937s
found 0 vulnerabilities

そして、Reactの開発ではこれだけでは足りません。

ES2015以降のシンタックスを変換する@babel/preset-env、さらにReactのJSXを変換する@babel/preset-reactもインストールしましょう。

$ git diff package.json
diff --git a/package.json b/package.json
index 7f6ef18..0ff68fd 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,10 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "@babel/core": "^7.1.6",
+    "@babel/preset-env": "^7.1.6",
+    "@babel/preset-react": "^7.0.0",
+    "babel-loader": "^8.0.4",
     "webpack": "^4.25.1",
     "webpack-cli": "^3.1.2"
   }

diffではこんな感じです。

$ git add . && git commit -m 'add babel'
[master df242c0] add babel
 2 files changed, 1173 insertions(+)

こちらもcommitしておきましょう。

次にステップ3です。

webpack.config.jsに対する設定を行っていきます。

diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 0000000..7be35b6
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,2 @@
+module.exports = {
+};

webpackの公式のページに行きます。

そして、DOCUMENTATIONのLOADERSのリンクをクリックします。

こちらには各種loaderが掲載されています。

今から設定するのはbabel-loaderです。

リンクをクリックします。

まずはこちらのページで、webpack.config.jsのファイルを作成します。

diff --git b/webpack.config.js a/webpack.config.js
index 7be35b6..b7320c3 100644
--- b/webpack.config.js
+++ a/webpack.config.js
@@ -1,2 +1,16 @@
 module.exports = {
+  module: {
+    rules: [
+      {
+       test: /\.m?js$/,
+       exclude: /(node_modules|bower_components)/,
+       use: {
+         loader: 'babel-loader',
+         options: {
+           presets: ['@babel/preset-env']
+         }
+       }
+      }
+    ]
+  }
 };

このような内容でwebpack.config.jsを作成します。

この内容についてはデフォルトの内容になりますので、

このファイルの生成によってbundleの挙動が変わることはありません。

$ git add . && git commit -m'add webpack.config.js'
[master 66d4b2c] add webpack.config.js
 1 file changed, 13 insertions(+)
 create mode 100644 webpack.config.js

commitします。

$ touch .babelrc
$ cat .babelrc
{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

次にbabelについての設定ファイルの作成です。

パッケージは導入済みなので、.babelrcの作成のみです。

上記のような.babelrcを作成します。

今回はjsxの変換も対象としたいので、@babel/preset-reactも追加します。

$ git add . && git commit -m 'add .babelrc'
[master 1e877ab] add .babelrc
 1 file changed, 3 insertions(+)
 create mode 100644 .babelrc

commitします。

Reactのインストール

$ npm install react react-dom
npm WARN setup-react-webpack-babel@1.0.0 No description
npm WARN setup-react-webpack-babel@1.0.0 No repository field.

+ react@16.6.3
+ react-dom@16.6.3
added 5 packages from 1 contributor and audited 5687 packages in 6.351s
found 0 vulnerabilities

いよいよReactのインストールです。

$ git add . && git commit -m'add react and react-dom'
[master 94f5212] add react and react-dom
 2 files changed, 52 insertions(+)

diff --git a/src/index.js b/src/index.js
index c60b0b4..b8eea7c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1 +1,7 @@
-console.log("Hello, webpack!")
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+ReactDOM.render(
+  <div>Hello, React!</div>,
+  document.getElementById('root')
+)

src/index.jsにReactのコードを書きます。

ReactとReactDOMをimportしてjsxをrenderする処理を追記します。

$ git commit -m 'add src/index.js'
[master 08a0976] add src/index.js
 1 file changed, 7 insertions(+)
 create mode 100644 src/index.js

commitしておきます。

$ npm install --save-dev html-webpack-plugin html-loader
npm WARN setup-react-webpack-babel@1.0.0 No description
npm WARN setup-react-webpack-babel@1.0.0 No repository field.

+ html-loader@0.5.5
+ html-webpack-plugin@3.2.0
added 44 packages from 60 contributors and audited 5790 packages in 7.897s
found 0 vulnerabilities

次にhtml-webpack-pluginとhtml-loaderをインストールします。

diff --git a/webpack.config.js b/webpack.config.js
index 84bf406..80f2f29 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,3 +1,4 @@
+const HtmlWebPackPlugin = require("html-webpack-plugin");
 module.exports = {
   module: {
     rules: [
@@ -7,7 +8,21 @@ module.exports = {
         use: {
           loader: "babel-loader"
         }
+      },
+      {
+        test: /\.html$/,
+        use: [
+          {
+            loader: "html-loader"
+          }
+        ]
       }
     ]
-  }
+  },
+  plugins: [
+    new HtmlWebPackPlugin({
+      template: "./src/index.html",
+      filename: "./index.html"
+    })
+  ]
 };

次に、webpack.config.jsを更新します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Dive into Hacking!</title>
  </head>

  <body>
    <div id="root"></div>
  </body>
</html>

次に、src/index.htmlの内容です。

Reactアプリケーションを作成する上でのポイントは1箇所だけ。

id属性を有するタグが存在することです。

該当のid属性のタグをReactアプリケーションのコンポーネントで上書きします。

$ npm run build

> setup-react-webpack-babel@1.0.0 build /Users/ham/git/setup-react-webpack-babel
> webpack --mode=production

Hash: a0d34f93424f8a9ccdab
Version: webpack 4.25.1
Time: 980ms
Built at: 2018-11-18 04:48:30
       Asset       Size  Chunks             Chunk Names
./index.html  225 bytes          [emitted]
     main.js    109 KiB       0  [emitted]  main
Entrypoint main = main.js
[3] ./src/index.js 161 bytes {0} [built]
    + 7 hidden modules
Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = ./index.html
    [0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html 208 bytes {0} [built]

再びbuildします。

$ npm install webpack-dev-server --save-dev

次に、webpack-dev-serverをインストールします。
これは毎度毎度buildするコストを減らすために入れます。

diff --git a/package.json b/package.json
index 311696c..b661e69 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,8 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "build": "webpack --mode=production"
+    "build": "webpack --mode=production",
+    "start": "webpack-dev-server --open --mode development"
   },
   "keywords": [],
   "author": "",

次に、webpack-dev-serverによるbuildが開発中に実行されるように、startというタスクを用意します。

次に、npm run startを実行します。

ブラウザが自動で立ち上がり、Hello, React!という文字が表示されたら成功です。

次にsrc/index.jsを開いて、

Hello, React2!と書き換えてみましょう。

書き換えて保存すると、リアルタイムにブラウザ上の表示内容にも更新されます。

ReactアプリケーションにおけるBabel、webpackの設定は終わります。

以上、最後まで読んでいただき有難うございました。