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

カテゴリー: 國田健史 | タグ: | 投稿日: | 投稿者:

solutionware について

クラウド型アプリケーション開発のソリューションウェア https://solutionware.jp/ 【サービス一覧】 クラウド型顧客管理システムの企画・開発 マーケティングオートメーションシステムの企画・開発 各種クラウド型業務システムの企画・開発 スマートフォン/タブレットアプリ(iOS、Android)の企画・開発 Salesforceインプリ、kintoneアプリ、フルスクラッチなど、ご用命にお応えいたします。

webpack入門」への1件のフィードバック

  1. ピンバック: webpack入門〜react.js導入編〜 | Solutionware開発ブログ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

eleven − 6 =