『Webpack + Babel + React』の導入・初期設定

Tweet

Pocket

こんにちは、okutani(@okutani_t)です。本記事では「Webpack4 + Babel7 + Reactを導入する方法・初期設定」について解説しています。

今回、導入するツールの説明は以下のとおりです。

かんたんに説明すると、「Webpackを利用することでJavaScriptを分割して管理」することができ、「新しい記述のJavaScriptをどのブラウザでも動くように変換してくれるツールがBabel」、ということですね。

今回は、その上でReactが動作する環境を作っていきます。

本記事執筆時に導入したツールの各バージョンは以下のとおりです。

また、本記事の内容で作成したファイルなどはGitHubに公開しています。合わせて確認してみてください。

参考okutani-t/webpack-react-sample: Webpack4 + Babel7 + React sample

それぞれのツールのGitHubリポジトリは以下のとおりです。

LINKwebpack/webpack: A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through “loaders”, modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, … and your custom stuff.

LINKbabel/babel: ? Babel is a compiler for writing next generation JavaScript.

LINKfacebook/react: A declarative, efficient, and flexible JavaScript library for building user interfaces.

それでは、Webpack, Babel, Reactの導入方法についてみていきましょう。

スポンサーリンク

前準備

まずはWebpackを導入したいプロジェクトを作成しましょう。

$ mkdir myapp
$ cd myapp

今回、Webpackの導入はyarnコマンドを利用します。

yarnが入っていない方は先に導入しておきましょう。「Mac + Homebrew」を利用したyarn導入方法は以下。

$ brew install yarn

一応、今回利用するyarnのバージョンを確認しておきます。

$ yarn --version
1.16.0

それでは、以下のコマンドを実行してpackage.jsonを設置します。

$ yarn init -y

以下の内容でpackage.jsonが生成されました。

{
  "name": "myapp",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}

それでは実際にWebpackを導入していきましょう。

Webpackの導入

以下のコマンドでWebpackを導入します。Webpack4からはコマンドラインでの実行に「webpack-cli」が必要になったので、合わせて導入しています。

$ yarn add webpack webpack-cli --dev

--devオプション（もしくは-Dオプション）を付けることで、devDependenciesにパッケージを追加しています。

Webpack自体はコードの実行時に必要ないので、devDependenciesとして導入しています。詳しくは以下の記事あたりが参考になります。

参考依存関係の種類 | Yarn

参考ちゃんと使い分けてる? dependenciesいろいろ。 – Qiita

yarn addを実行すると、自動で「node_modulesディレクトリ」が作成され、そこにWebpack関連のファイルがダウンロードされます。

プロジェクトをGitで管理する場合、「node_modules/」はGit管理に含めたくないので、以下のコマンドで.gitignoreに記述しておきます。

$ echo node_modules > .gitignore

また。今回は開発をスムーズにおこなえるように開発用Webサーバーとして「webpack-dev-server」も合わせて導入します。

$ yarn add webpack-dev-server --dev

それでは、次はBabelの導入についてみていきます。

Babelの導入

Babelの導入をおこないます。以下を実行。

$ yarn add @babel/core @babel/preset-env babel-loader --dev

今回導入したパッケージは以下のとおりです。

「@babel/preset-env」「babel-loader」のGitHubリポジトリは以下です。

LINK@babel/preset-env · Babel

LINKbabel/babel-loader: ? Babel loader for webpack

上記は「WebpackでBabelを利用する際に必要」ぐらいにとらえておけばOKです。

これで新しい記述方法でJavaScriptを書けるようになりました。

では、次にReactの導入をおこなっていきましょう。

Reactの導入

以下のコマンドを実行して、Reactの動作に必要なパッケージを導入していきます。

$ yarn add react react-dom
$ yarn add @babel/preset-react --dev

「@babel/preset-react」を導入することで、JSXの記法に対応したReactをBabelから利用できるようにしています。

これでWebpack, Babel, Reactの導入が完了しました。

webpack.config.jsの設置

Webpackを利用するために「webpack.config.js」を設置します。以下のコマンドでファイルを作成。

$ touch webpack.config.js

今回は以下のように実装しました。

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: `${__dirname}/dist`
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-env',
              '@babel/react'
            ]
          }
        }
      }
    ]
  },
  devServer: { 
    contentBase: 'dist', 
    open: true
  }
};

項目はそれぞれ以下のとおりです。

これでwebpack.config.jsが設置できました。

package.jsonの設定

実行コマンドを分かりやすくするために、package.jsonにscriptsを追加します。

以下のようになりました。

{
  "name": "myapp",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "./node_modules/.bin/webpack-dev-server",
    "build": "webpack --mode production"
  },
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "webpack": "^4.34.0",
    "webpack-cli": "^3.3.4",
    "webpack-dev-server": "^3.7.2"
  },
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6"
  }
}

scriptsに「start」と「build」を追加しました。それ以外は特に変更はありません。

上記のscriptsは自由に設定できるので、お好みで記述してみてください。

サンプルの一例

Reactを実行するため、サンプルファイルを設置してみます。

$ mkdir src
$ mkdir dist
$ touch src/index.js
$ touch src/sub.js
$ touch dist/index.html

それぞれ以下のように実装してみました。

・index.js

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

import {HelloWorld} from './sub';

class App extends React.Component {
  render() {
    return (
      <div>
        <HelloWorld name="okutani" />
      </div>
    );
  }
}

ReactDOM.render(<App/>, document.querySelector('#app'));

・sub.js

import React from 'react';

export class HelloWorld extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello World, {this.props.name}!</h1>
      </div>
    );
  }
}

・index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Webpack React Sample</title>
  </head>
  <body>
    <div id="app"></div>

    <script src="main.js"></script>
  </body>
</html>

「html-webpack-plugin」を利用することで、HTMLの出力も同時におこなうことができますが、本記事では割愛しています。

それでは、実際に実行してブラウザに表示させてみましょう。

実行方法

一通りのパッケージの導入が完了したので、実際に実行してみます。

開発用Webサーバーでの実行

以下のいずれかのコマンドを実行して、Webサーバーを立ち上げます。

$ ./node_modules/.bin/webpack-dev-server
# or
$ yarn run start
# or
$ yarn run webpack-dev-server

package.jsonにscriptsを設定しているので、「$ yarn run start」のようにかんたんに実行することができます。

「http://localhost:8080」にアクセスして、サイトが適切に表示されるか確認してみましょう。

ビルドでの実行

ビルドをおこない、直接index.htmlを開いて実行してみます。

以下のいずれかのコマンドを実行。

$ yarn run webpack
# or
$ yarn run build

上記を実行することで、「dist/main.js」が出力されます。

index.htmlを開くと、サイトが表示されるはずです。

確認

以下のように表示されればOKです（webpack-dev-serverの場合）。

これでWebpackとBabelを利用してES6などの新しい記法でJavaScriptを書くことができ、Reactを使ったモダンな開発などおこなうことができますね。

まとめ

本記事では、Webpackの導入から、Babel, Reactの導入から実行方法について見ていきました。

本記事の方法では１つひとつ手動で導入していましたが、「create-react-app」というツールを利用すると、これらの初期設定がかんたんに完了できます。

参考facebook/create-react-app: Set up a modern web app by running one command.

ただし、はじめのうちはWebpackやBabelの理解をおこなうために、手動で導入してみて、より各ツールの理解を深めていくのがいいかなと思います。

今風のJavaScriptを書きたい方の参考になれば幸いです。

Tweet

Pocket

okutani (okutani_t) のヒトコト

okutani_t

最近のフロント周りの管理で主流になりつつあるWebpack。これから仲良くしていこうと思います。

Web開発のお仕事を募集しています