webpackの導入を最小単位で試してみる

webpack is 何？

webpackとはJavaScriptをまとめてくれるモジュールバンドラーです。なぜまとめる必要があるのか？それは、一度にウェブサーバーと通信できるファイル数は限られているため、ファイルサイズの小さいファイルを細切れで転送するより、大きいファイルを一度に転送した方が、効率が良いからです。

それだけなら、他のツールでも実現可能ですが、
webpackの場合は、標準仕様のES Modulesが使えたり、node_modulesのモジュールを結合できるとのこと。とすると他のツール（Gulp, Grunt...）はnode_moduleを結合してくれないという事なのか・・？

それだけでなく、CSSや画像のバンドルもできるとのことですが、CSSはイメージできるとして、画像のバンドルってなんだ？次回調べてみます。

それでは早速実践してみましょう。

手を動かす

本当にゼロの状態から始めます。
所要時間：5mins程度

1.まずは、ディレクトリを作って、初期化。

mkdir sample
cd sample
npm init -y

package.jsonが生成されます。

2.webpackをインストール

npm install -D webpack 

scriptのところに"build": "webpack"を追記しましょう。

{
  "scripts": {
    "build": "webpack"
  },
  "devDependencies": {
    "webpack": "^3.10.0"
  }
}

devDependenciesのところにwebpackが追加されています。

3.バンドルするJSを用意する。

ディレクトリ内にテキトーにsrcとかでディレクトリを切って、main.jsとsub.jsみたいな２つのファイルを用意しましょう。内容は下記のような感じ。

main.js

// sub.js ファイルを読み込む。
import {hello} from './sub';
// sub.jsに定義されたhello関数を実行。
hello();

sub.js

// export文を使ってhello関数を定義。
export function hello() {
  alert('helloメソッドが実行された。');
}

4. webpack.config.jsを作成

webpack.config.js

module.exports = {
  // メインとなるJavaScriptファイル
  entry: './src/main.js',

  // ファイルの出力先設定
  output: {
    // ディレクトリ名
    path: `${__dirname}/`,
    // ファイル名
    filename: 'bundle.js'
  }
};

5. webpackによるbuild

npm run build

これで、main.jsとsub.jsが統合され、ひとつのbundle.jsというファイルができました。
HTMLで読み込んで、ブラウザでアラートが表示されるか確認してみましょう。

index.html

<script src="bundle.js"></script>

表示されました。