概要
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 でも当ててみたいと思います
0 件のコメント:
コメントを投稿