[Sy] はじめての webpack（ yarn でインストール＆動作確認）

2018/02/07

フロントエンドで必須となってきている webpack を（ようやく）ぼくも使っていきます。まずはシンプルに webpack を yarn でインストールして動作を軽く見てみます。

公式サイトはこちら。

⇒ webpack

1. webpack をインストール

基本的には公式の「Getting Started」を参考にします。

⇒ Getting Started

作業用ディレクトリを適当につくって、 webpack をインストールします。

$ mkdir hello-webpack
$ cd hello-webpack

$ yarn add webpack --dev
yarn add v1.3.2
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 📃  Building fresh packages...
success Saved lockfile.
success Saved 314 new dependencies.
・
・
・
✨  Done in 3.64s.

2. 必要なファイルを準備

今回必要となるファイルを以下のように準備していきます。

hello-webpack/
 ├ dist/
 │  ├ bundle.js
 │  └ index.html
 ├ src/
 │  ├ lib/
 │  │  └ hello.js
 │  └ index.js
 └ package.json

bundle.js は、自分では作りません。 index.js と hello.js を作った後で、 webpack によって作成してもらうファイルになります。

まずは hello.js から作っていきます。

単純に「Hello webpack!」とコンソールに出力するだけのモジュールにします。

$ mkdir -p src/lib
$ vim src/lib/hello.js

(hello.js)

const hello = () => {
  console.log('Hello webpack!');
}

export default hello;

次に index.js を作って、その中で hello.js の処理を実行するようにします。

$ vim src/index.js

(index.js)

import hello from './lib/hello';

hello();

最後に index.html を作ります。

$ mkdir dist
$ vim dist/index.html

(index.html)

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>はじめてのwebpack</title>
</head>
<body>
  <script src="bundle.js"></script>
</body>
</html>

index.html で読み込む JavaScript のファイルは、この後作る bundle.js のみで OK です。

3. webpack を使って bundle.js を作成

今回の本題です。

本来は、先ほど作った index.js と hello.js をそれぞれ script タグで読み込む必要がありますが、以下のコマンドを実行して新しく bundle.js というファイルを作成します。

$ ./node_modules/.bin/webpack --entry ./src/index.js --output-path dist --output-filename bundle.js

こんな感じの出力が確認できれば、正常に動作しています。

Hash: 73a0ca0d18b1bf07d63a
Version: webpack 3.10.0
Time: 56ms
    Asset     Size  Chunks             Chunk Names
bundle.js  2.98 kB       0  [emitted]  null
   [0] ./src/index.js 43 bytes {0} [built]
   [1] ./src/lib/hello.js 79 bytes {0} [built]

これで webpack によるファイルの結合が完了になります。

4. index.html をブラウザで開く

動作確認です。

ブラウザで index.html を開き、developer tools でコンソールを確認して、以下のようにメッセージが出力されていれば成功です。