目次：React.js

webpackのインストール

2018年02月09日| React.js

webpackのインストール

Webpackは自分で書いたJSとライブラリとして読み込んでいるJSを一つのJSファイルにまとめてくれる便利なツールです。

webpack公式サイト

npmでインストールします。

npmとnodeのバージョンは以下の通りで環境構築を進めます。

chihiro.matsuda$ npm -v 5.6.0 chihiro.matsuda$ node -v v8.9.4 cd react-sample

私はreact-sample　というディレクトリ内で作業することにしました。npmのパッケージ郡もこのディレクトリ以下に設置します。

>npm initの実行

npm initでpackage.jsonを作ります。
任意のディレクトリでターミナルから npm initを実行します。

全部Enterキー連打でも問題ありません。

chihiro.matsuda$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (react_sample) react-beginner <<< パッケージ名
version: (1.0.0) 0.0.0 <<< バージョン
description: package for react beginner<<< パッケージの説明
entry point: (index.js)<<< ビルドされるJSをファイル名
test command:<<< テストコマンド
git repository: git://github.com/chihirokaasan/react-beginner<<<git リポジトリ
keywords: react <<< npm 公開時に必要らしい
author: ITKAASAN.LLC<<< 著者
license: (ISC)<<< ライセンスこのまま
About to write to /Users/chihiro.matsuda/work/react_sample/package.json:

{
  "name": "react-beginner",
  "version": "0.0.0",
  "description": "package for react beginner",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git://github.com/chihirokaasan/react-beginner.git"
  },
  "keywords": [
    "react"
  ],
  "author": "ITKAASAN.LLC",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/chihirokaasan/react-beginner/issues"
  },
  "homepage": "https://github.com/chihirokaasan/react-beginner#readme"
}

できあがったpackage.jsonのファイル

webpackのインストール

ではさっそくwebpackのインストールを行います。

グローバル

chihiro.matsuda$ npm install webpack -g

プロジェクト毎

chihiro.matsuda$ npm install webpack --save-dev

今回はプロジェクト毎にインストールする方を選択しました。
package.jsonのdevDependenciesにバージョン付きで登録します。

npm installするとpackage.jsonに自働で追記されます。

  "devDependencies": {
    "webpack": "^3.10.0"
  }

package.jsonの差分

試しに何かビルドしたい。そうだ、jQuery入れよう。

試しにjQueryをnpmでインストールして、ちょっとしたイベントを別ファイルで書いて、webpackで一つのファイルにビルドしてもらう手順をやります。

jQueryをnpmでインストールする

chihiro.matsuda$  npm install jquery --save

package.jsonの差分

webpackとinstallのオプションが違うのでdependenciesに保存されます。
package.jsonのdependenciesに関する情報はこちらでよくまとまっております。
ちゃんと使い分けてる? dependenciesいろいろ。

var $ = require("jquery");

$(function(){
  console.log('hoge');
});

PATHを通して、webpackのビルドコマンドを実行

webpackでビルドします。

nodeモジュールのパスを通す

 export PATH=$PATH:./node_modules/.bin

今回はシンプルにjQueryを呼び出してコンソールに文字列を出力するだけ。

/javascript/sample1.js

var $ = require("jquery");

$(function(){
  console.log('hoge');
});

私はjavascriptディレクトリを掘って、そこにjsファイルを作りました。
これをビルドします。すると、カレントディレクトリにbundle.jsができあがります。

chihiro.matsuda$ webpack javascript/sample1.js bundle.js

ビルドしたファイルをHTMLで呼び出し

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Webpack build test</title>
</head>

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