読者です 読者をやめる 読者になる 読者になる

Webpack入門編

Webpack入門編

Webpackとは?

http://webpack.github.io/docs/

Webpack

フロントエンドにおける依存関係を管理し、まとめて使えるようにしてくれるスグレモノ。Browserifyより多機能だが、その分学習コストも高い。

uraway.hatenablog.com

インストール

プロジェクトにインストールする

$ npm install webpack --save-dev

デベロッパツール

$ npm install webpack-dev-server --save-dev

チュートリアル

コンパイルする

まずは空のディレクトリを用意して、そこにファイルを追加する
entry.jsを追加

document.write("It works.");

index.htmlを追加

<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
  </body>
</html>

webpackコマンドでファイルをコンパイルしバンドルする。

$ webpack ./entry.js bundle.js

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

$ open index.html

It worksと表示されるはず。
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) {

    document.write("Webpack works.");


/***/ }
/******/ ]);

Browserifyのバンドルファイルと比べ可読性が高い。

ファイルの追加

content.jsを追加

module.exports = "It works from content.js.";

entry.jsを更新

document.write(require("./content.js"));

コンパイルし直す。

$ webpack ./entry.js bundle.js

ブラウザを更新してIt works from content.jsの表示を確認する。

ローダー

cssファイルをアプリケーションに追加しよう。

webpackはJavaScriptのみを扱うので、css-loaderstyle-loaderをインストールする。

$ npm install css-loader styles-loader

ローカルにインストール後、プロジェクトにnode_modulesフォルダがつくられる。

style.cssの追加

body {
  background: yellow;
}

entry.jsの更新

require("!style!css!./style.css");
document.write(require("./content.js"));

コンパイルしてブラウザを更新すると背景色が黄色になっているはず。

ローダーのバインド

ファイルの拡張子をローダーにまとめることができる。
entry.jsの更新

require("./style.css");
document.write(require("./content.js"));
$ webpack ./entry.js bundle.js --module-bind 'css=style!css'

(注:ダブルクオート""ではなく、シングルクオート''でないと正しくコンパイルされない。bash: !css: event not found
ブラウザをリロードすると同じ結果を得られる。

コンフィグ

webpack.config.jsの追加

module.exports = {
  entry: "./entry.js",
  output: {
    path: _dirname,
    filename: "bundle.js"
  },
  module: {
    loaders: [
      { test: /\.css$/, loader: "style!css" }
    ]
  }
};

コマンドを叩いてコンパイルする。

$ webpack

カレントディレクトリのwebpack.config.jsが読み込まれ、実行される。

監視モード

$ webpack --progress --colors --watch

変更を監視して、必要があればコンパイルし直す。progressオプションをつけるとプログレスバーが表示される。

デベロップメントサーバー

$ npm install webpack-dev-server -g
$ webpack-dev-server --progress --colors

ローカルサーバーが立ち上がり、http://localhost:8080/webpack-dev-server/ にブラウザでアクセスすることができる。変更を監視し、webpackがリコンパイルした時に、自動的にブラウザを更新してくれる。