SAHARA

webpack + React + es6入門チュートリアル

更新回数:2回 | 2015/12/24更新
編集者:Thumb img 0

このページではwebpackでReactとes6を使用する方法をチュートリアル形式で記載しています。webpackやReactはアップデートが激しくすぐ使用方法が変わるので、アップデートがあれば変更願います。

構築

まず作業ディレクトリを構築します。
mkdir webpack-react && cd webpack-react
git init
npm init
npm initを実行すると設定を記述できる画面に移りますが、全てEnterキーを押し設定を終了してください。
ちなみにnpm initでpackage.jsonを生成します。package.jsonはnpmの設定ファイルです。

webpack

次に、webpackを導入します。webpackは散らばったjsファイル、cssファイルなどをまとめて配信できるシステムを提供してくれています。
npmを通して、webpackをインストールします。
npm install webpack --save-dev
--save-devをつけると先ほど生成したpackage.jsonのdevDependenciesにwebpackが記載され、パッケージの管理に役立ちます。

webpackの設定ファイル

webpackの設定ファイルを設置します。ルートディレクトリにwebpack.config.jsを作成してください。
webpack.config.js
module.exports = {
  context: __dirname + "/app",
  entry: "./app.js",

  output: {
    filename: "app.js",
    path: __dirname + "/dist",
  },
}
contextではwebpackが動作するルートディレクトリを指定しています。entryでは./app/app.jsにエントリーポイント(webpackが最初に読み込むファイル)を設定しています。

[途中]

発言はまだありません。
発言するにはログインもしくは、会員登録をしてください。