webpackとは

webpackは開発者が実装したjavascriptなどのファイル群を、統合したり分割したりするツールです。実装時は機能ごとにファイルを分けてプログラムしていくのが王道ですが、サービスリリース時点でも実装時と同じファイルのままリリースしてしまうと、個々のファイルをクライアント側にダウンロードするのに頻繁なサーバー通信が発生してしまい、レンダリングに時間がかかってしまいます。 webpackを使うことで、設定ファイルさえあればコーディングなしにリソースの統合が可能になります。

インストール

Node.jsインストール

Node.jsがインストールされていない場合はインストールが必要です。 CentOS: https://nodejs.org/en/download/package-manager/#enterprise-linux-and-fedora Mac: https://nodejs.org/en/download/package-manager/#osx Win: https://nodejs.org/en/download/package-manager/#windows Node.jsをインストールすることで、webpackのインストールに必要な、npmというモジュールもインストールされます。

webpackインストール

sudo npm install webpack -g

ファイル統合の初歩

以下の階層でファイルが存在したとして、２つのjsファイルを実際に１つに統合してみましょう。

client/
- index.html
- js/
  - index.js
  - hello.js

統合したファイルは、dist/bundle.jsとして保存されるようにします。

client/
- dist/
  - bundle.js

実装したファイルは、index.jsからhello.jsを実行するシンプルなものです。 webpackが依存するファイルをすべて取り込んでくれます。

//index.js
var hello = require('./hello');
hello();

//hello.js
module.exports = function() {
  alert('Hello Wolrd !');
};

//index.html
<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Webpack Tutorial</title>
</head>
<body>
  <script src="dist/bundle.js"></script>
</body>
</html>

設定ファイルは以下のとおりです。ファイル名はwebpack.config.jsとします。

//webpack.config.js
module.exports = {
  entry: {
    index: './client/js/index.js'
  },
  output: {
    path: __dirname + '/client/dist',
    filename: 'bundle.js'
  }
};

では、統合を実行してみます。プロジェクト直下で以下のコマンドを実行するだけです。

$ webpack

index.htmlをブラウザで表示すると、以下のようになります。

この記事を書いた人 : 國田健史

その他のスタッフブログ:

一覧へ戻る

webpack入門

webpackとは

インストール

Node.jsインストール

webpackインストール

ファイル統合の初歩

JOIN OUR TEAM