JavaScriptファイルをwebpackで処理してみます。
1ファイルでの例
$ mkdir webpack_wk
$ cd webpack_wk/
webpack で処理させるjsを作成します。
$ vi foo.js
document.write(“Hello webpack”);
foo.js から bundle.js を作成します。
$ webpack ./foo.js bundle.js
bundle.jsを呼び出すHTMLファイルを作成します。
$ vi index.html
<!doctype html>
<html>
<head>
</head>
<body>
<script type=”text/javascript” src=”bundle.js” charset=”utf-8″></script>
</body>
</html>
index.htmlをブラウザで表示すると、Hello webpackと表示されます。
ちなみに、bundle.jsは以下のような内容になります。
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ function(module, exports, __webpack_require__) {
document.write("Hello webpack");
/***/ }
/******/ ])
2.require(依存付け)を利用してみる
先ほどのfoo.jsに外部jsファイルの依存を加えてみます。
$ vi foo.js
require(“./bar.js”); //これでbar.jsが読込まれる。
document.write(“Hello foo.js”);
require(“./baz.js”); //これでbarzjsが読込まれる。
$ vi bar.js
document.write(“Hello bar.js”);
$ vi baz.js
document.write(“Hello baz.js”);
$webpack ./foo.js bundle.js
bundle.js の中身を見てみると、foo.jsの処理の下に、bar.jsが追加されているのがわかります。
jsの処理を追っていくと、jsごとに無名関数 function(module, exports, __webpack_require__) でラップされているのがわかります。
そして、上から順番にモジュールIDがふられていきます。jsの途中で、require(“./foo.js”);のように書いたところは、__webpack_require__(moduleID)に置き換えられます。この関数によって依存性のあるモジュールが読込まれることになります。
index.htmlを実行すると、
Hello bar.jsfoo.jsHello baz.js
と表示されます。foo.jsに記載した順で実行されているのがわかります。
3.相互に依存させるとどうなるか
bar.jsのなかでrequire(“./foo.js”);とすると、webpack実行時にエラーが出て怒られました。
エントリーポイント(webpack実行時にしていする元ファイル)に対して依存することは禁止されているみたいです。
それ以外のモジュール同士であれば、相互に依存させた場合も、後から読込まれたモジュール内のrequireが呼ばれた際には先に読込まれたモジュールはinstalledModulesに保存されているので、そのexportsが返されます。
4.CSSの読み込み
webpackだけではCSSに対応していないため、css-loader style-loaderが必要になります。
インストールはnpmを使って簡単にできます。
$ npm install css-loader style-loader
インストールが完了したら、CSSを作って読込んでみます。
$ vi foo.css
body { background: red;}
$ vi foo.js
require(“foo.css”);
document.write(“background is red”);
$ webpack ./foo.js bundle.js
bundle.js を見てみると、jsのときと同じようにCSSを読込んでいるのがわかります。
CSSは最終的にheadタグの下に読込まれるようになっています。
CSS読み込み時はrequireの書き方が特殊ですが、webpack実行時にオプションとして–module-bind ‘css=style!css’ を指定すれば、require(“./foo.css”)のように書くことができます。
5.便利な設定
コマンドの簡素化
ここまで見てきたwebpackの使い方は、いずれもファイルの指定だったり、CSSのオプションをつけたりと面倒でした。
開発中同じオプションで使い続ける場合は、設定ファイルを作ると楽になります。
例えば、最初に読込ませるjsファイルをentry.js、生成するjs名をbundle.jsとし、CSSローダーも組み込む(CSSの読み込み時に、require(“./foo.css”)と書けるようにする)には以下の設定ファイルを作成します。
webpack.config.js
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /\.css$/, loader: "style!css" }
]
}
};
この設定ファイルをwebpack実行時のパスに置くことで、webpackの実行が以下のコマンドのみですむようになります。
$ webpack
その他実行時のオプション
–progress
開発が進み、ファイル数が増えてくるとwebpackの実行にも時間がかかるようになります。
|
1 |
--progressオプションを利用すると、プログレスバーの表示ができます。 |
--colors
--colorsオプションを利用すると、出力結果に色がついて見やすくなります。
--watch
–watchオプションを利用すると、webpack管理下のファイルが修正された場合に、自動的にコンパイル(webpackの実行)が行われます。
既にコンパイルされているファイルはキャッシュされているため、かなり高速に実行できます。
コマンドラインで–watchモードで実行すると、フォアグラウンドで実行されて入力が受け付けられなくなるので、Ctrl+Zでバックグラウンドに移してbgでジョブを再開させてください。(もしくは&をつけてコマンド実行してください。)
止めるときは、fgでフォアグランドに持ってきてCtrl+Cでいいかと思います。