JavaScript
es6
gulp
webpack

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みたいな2つのファイルを用意しましょう。内容は下記のような感じ。

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>

Screen Shot 2018-01-27 at 20.04.35.png

表示されました。