2017年10月24日火曜日

webpack に入門してみた

概要
環境
作成するファイル一覧
webpack のインストール
packer.json の作成
webpack.config.js の作成
起点となる app.js の作成
モジュールファイルの作成
HTML ファイルの作成
ビルド
動作確認
最後に
参考サイト

概要

webpack は複数の js ファイルや css をファイルを一つの js ファイルにまとめてくれるツールです
node で動作します
今回は webpack を使って簡単な HTML を出力するところまでやってみました

環境

macOS X 10.12.6
node 8.7.0
webpack 3.8.1

作成するファイル一覧

今回作成するファイルの構成は以下の通りです

.
├── package-lock.json
├── package.json
├── public
│   ├── index.html
│   └── js
│       └── bundle.js
├── src
│   └── js
│       ├── app.js
│       └── modules
│           ├── footer.js
│           └── header.js
└── webpack.config.js

順を追って全部作成していきます

webpack のインストール

まずはこれがないと始まりません

npm install webpack -g

で webpack コマンドが使えるようになります

packer.json の作成

今回は外部のモジュールも使用するため dependencies に 2 つほど追加しています

npm init
vim packer.json

{
  "name": "webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": ">=3.2.1",
    "date-utils": ">=1.2.21"
  }
}

npm install

jquery と date-utils をインストールするために作成します
やることによっては必須ではないです
今回は使うためインストールしています

webpack.config.js の作成

いわゆる設定ファイルです

vim webpack.config.js

const path = require('path');

module.exports = {
    entry: './src/js/app.js',
    output: {
        filename: 'bundle.js',
        path: path.join(__dirname, 'public/js')
    }
};

起点となる js ファイルと最終的に出力される bundle.js の出力パスを指定しています

起点となる app.js の作成

あとで作成するモジュールを読み込んでメインとなる処理を実施します

vim src/js/app.js

import $ from 'jquery';
import headerText from './modules/header';
import footerText from './modules/footer';

var htext = headerText();
var ftext = footerText();

$('header').html(htext);
$('footer').html(ftext);

今回はヘッダ情報とフッタ情報を生成するモジュールを作成しました
そしてそれらモジュールと jquery を使って HTML 情報を作成しています

モジュールファイルの作成

各機能ごとに作成します
今回は簡単な文字列情報を返却するモジュールファイルを 2 つ作成します

vim src/js/modules/header.js

export default function headerText() {
    return "Header";
}

vim src/js/modules/footer.js

export default function footerText() {
    require('date-utils');
    var date = new Date();
    var now = date.toFormat("YYYY/MM/DD HH24:MI:SS");
    return `DateTime: ${now}`;
}

せっかくなので外部のモジュールを読み込んで使っています
アクセスごとに時刻が変わるようになります

HTML ファイルの作成

vim public/index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>webpack tutorial</title>
</head>
<body>
  <header></header>
  <footer></footer>
  <script src="js/bundle.js"></script>
</body>
</html>

ビルドして作成される bundle.js を読み込んでいます

ビルド

webpack.config.js のあるディレクトリで実行しましょう

webpack

すると以下のようにビルド結果が表示されます

Hash: 44c1686f210ca4db43de
Version: webpack 3.8.1
Time: 362ms
    Asset    Size  Chunks                    Chunk Names
bundle.js  325 kB       0  [emitted]  [big]  main
   [0] ./src/js/app.js 214 bytes {0} [built]
   [2] ./src/js/modules/header.js 62 bytes {0} [built]
   [3] ./src/js/modules/footer.js 180 bytes {0} [built]
    + 2 hidden modules

これで public/js/bundle.js にすべてのファイルがまとめられたバンドルファイルが作成されます

動作確認

public/index.html をブラウザで確認してみましょう
すると以下のような感じで表示されると思います

最後に

webpack を使ってみました
モジュールをわけて開発することができるのが一番の魅力かなと思います
最終的には 1 つのファイルができあげるだけなので利用する側も簡単になります
今回は Javascript のバンドルだけを行いましたが、CSS のバンドルもできるようです
できあがったサンプルが寂しいので次回は webpack を使って CSS でも当ててみたいと思います

hawksnowlog