ブログBlog

    • webpack入門

    • 2016年6月14日
    • webpack

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

ファイル統合の初歩

以下の階層でファイルが存在したとして、2つのjsファイルを実際に1つに統合してみましょう。
  • 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
スクリーンショット 2016-06-11 11.28.42 index.htmlをブラウザで表示すると、以下のようになります。 スクリーンショット 2016-06-11 11.29.21

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

一覧へ戻る

開発についてのお問い合わせはこちら

お問い合わせ

JOIN OUR TEAM

積極採用しています。私たちと一緒に働きませんか?