Help us understand the problem. What is going on with this article?

webpack / babel / Reactのセットアップを試す

More than 1 year has passed since last update.

webpack / babel / React のセットアップ

  • 元記事
  • npmの代わりにyarnを利用する
    • brew install yarn しておく

webpack

  • module bundler
    • transpileの実行 / JSファイルのバンドル , SASS / PostCSS のビルドなど
yarn add -D webpack
  • src/js/app.js を作成してwebpack を使う
    • dist/app.bundle.js が作成される
./node_modules/webpack/bin/webpack.js ./src/js/app.js --output-filename ./dist/app.bundle.js
  • 上のパラメータはwebpack.config.js で設定できる
    • コマンドもwebpack.js の実行だけでよくなる
    • entry(ソース)と output(出力先)
const path = require('path');

const paths = {
  DIST: path.resolve(__dirname, 'dist'),
  JS: path.resolve(__dirname, 'src/js'),
};

module.exports = {
  entry: path.join(paths.JS, 'app.js'),
  output: {
    path: paths.DIST,
    filename: 'app.bundle.js'
  },
};
  • package.json にbuild scriptを追加
    • yarn build コマンドでbundleが実行される
    • node_modules内のバイナリファイルはyarn (npm) が探してくれる
  "scripts": {
    "build": "webpack"
  }

webpack dev server

  • ブラウザでアプリケーションを開いて動作確認するにはサーバーが必要

    • webpack dev server で開発中のアプリケーションをブラウザで動作確認できる
  • install

yarn add -D webpack-dev-server
  • package.json にdevコマンド追加
{
  "name": "webpack-babel-react-revisited",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.4"
  },
  "scripts": {
    "dev": "webpack-dev-server",
    "build": "webpack"
  }
}

  • yarn dev のあと、 http://localhost:8080 にアクセスできるようになる
  • ベースになるHTMLを作成 ( src/index.html )
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">

    <title>Webpack Babel React revisited</title>
  </head>
  <body>
  </body>
</html>
  • webpack.config.js にcontent baseを設定
const path = require('path');

const paths = {
  DIST: path.resolve(__dirname, 'dist'),
  SRC: path.resolve(__dirname, 'src'), // content base用のpathを追加
  JS: path.resolve(__dirname, 'src/js'),
};

module.exports = {
  entry: path.join(paths.JS, 'app.js'),
  output: {
    path: paths.DIST,
    filename: 'app.bundle.js'
  },
  devServer: {
    contentBase: paths.SRC, // dev server のcontent base設定
  },
};
  • この状態で yarn dev すると、jsを読み込んでないので空ページが表示される

  • html-webpack-plugin をインストール

yarn add -D html-webpack-plugin
  • webpack.config.js にプラグインの設定を追加
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(paths.SRC, 'index.html'),
    }),
  ],
  • 全体
const path = require('path');

// プラグインをrequire
const HtmlWebpackPlugin = require('html-webpack-plugin');

const paths = {
  DIST: path.resolve(__dirname, 'dist'),
  SRC: path.resolve(__dirname, 'src'),
  JS: path.resolve(__dirname, 'src/js'),
};

module.exports = {
  entry: path.join(paths.JS, 'app.js'),
  output: {
    path: paths.DIST,
    filename: 'app.bundle.js'
  },
  devServer: {
    contentBase: paths.SRC,
  },
  // プラグインの設定
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(paths.SRC, 'index.html'),
    }),
  ],
};
  • yarn dev でconsoleにメッセージが出力される
    • ファイルを変更したら自動で再読込してくれる

babel

  • モダンなJSでコードを書いたらtranspilerが必要
    • モダンなJSを、ブラウザで実行できるJSに変換してくれる
  • Reactがbabelと深く結びついてる
  • 良いコードを書くためにも利用したほうがいい
  • 必要なパッケージが4つ
    • Babel core package
    • Babel webpack loader
    • Babel env preset
    • Babel React preset
  • まとめてinstall
yarn add -D babel-core babel-loader babel-preset-env babel-preset-react
  • babel用の設定ファイル .babelrc をrootに作成
    • envとreact用のpresetを使用する
{
  "presets": ["env", "react"]
}
  • webpack.config.jsの更新
    • 拡張子が js or jsx のファイルを読み込んでbabel-loaderを使う設定
const path = require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');

const paths = {
  DIST: path.resolve(__dirname, 'dist'),
  SRC: path.resolve(__dirname, 'src'),
  JS: path.resolve(__dirname, 'src/js'),
};

module.exports = {
  entry: path.join(paths.JS, 'app.js'),
  output: {
    path: paths.DIST,
    filename: 'app.bundle.js'
  },
  devServer: {
    contentBase: paths.SRC,
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(paths.SRC, 'index.html'),
    }),
  ],
  // js or jsxのファイルでbabel-loaderを使う設定
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: [
          'babel-loader',
        ],
      },
    ],
  },
  // 拡張子を指定しなくてもimportできるようになる設定
  resolve: {
    extensions: ['.js', '.jsx'],
  },
};

React

  • react / react-dom をインストール
yarn add react react-dom
  • index.html にdiv要素追加
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">

    <title>Webpack Babel React revisited</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>
  • app.js を編集
import React, { Component } from 'react';
import { render } from 'react-dom';

export default class Hello extends Component {
  render() {
    return (
      <div>
        Hello from react
      </div>
    );
  }
}

render(<Hello />, document.getElementById('app'));
  • yarn dev すると、ブラウザにメッセージが表示される
ykokw
最近はReact.jsを使ってフロントエンドエンジニアをしています
https://blog.ykokw.xyz/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした