Gulpで始めるwebpack 3入門

  • 142
    Like
  • 5
    Comment

webpackは複数ファイルのJavaScriptファイルやCSS、画像ファイルをモジュールとして取り扱う為の人気のツールです。2017年7月時点の最新バージョンは3です。

webpack 3の公式サイト

webpackはJavaScriptのモジュールの取り扱いに特に便利で、機能ごとに分割したJavaScriptをrequire()importを使って読み込めるようになります。ビルドツールGulpと組み合わせれば、大規模なプロジェクトでも見通しのよいタスクを定義可能です

webpack 3をGulpで使用するには一工夫が必要なので、本エントリーで紹介します。

なお、webpackについて詳しくは記事「最新版で学ぶwebpack 3入門 - JavaScript開発で人気のバンドルツール - ICS MEDIA」を参照ください。

環境準備

Gulpの詳しい導入方法や使い方については記事「絶対つまずかないGulp入門。インストールからSassのコンパイルまで」を参照してください。以下、Gulpを導入済みの環境として説明します。

プロジェクトフォルダに移動し、プロジェクトの初期設定を行います。

プロジェクトの初期設定
npm init -y

webpackをGulpで使うための必要なパッケージは下記です。

  • gulp:Gulp本体です
  • webpack:webpack本体です。最新バージョン3がインストールされます。
  • webpack-stream:webpackをgulpで使用する為のプラグインです(※)。

※ Gulpでwebpackを使用するためのプラグインとしてgulp-webpackもありますが、こちらは古いので使わないよう注意してください。

次のコマンドを用いて、各プラグインをインストールします。i-Dを使ったコマンドの省略、複数プラグインの同時インストールについて不明な点があれば記事「GulpやSassを使う時に覚えて幸せになったnpmの便利な使い方」を参照ください。

必要プラグインのインストール
npm i -D gulp webpack webpack-stream

フォルダ構成

次のようにファイルを配置します。 

├── gulpfile.js   (Gulpのタスクを記述するファイル)
├── package.json
├── src           (サンプルとなるJavaScriptモジュール群)
│   ├── main.js
│   └── sub.js
└── webpack.config.js  (webpackの設定ファイル)

サンプルのJavaScriptファイル

webpackの動作確認のため、下記のJavaScriptモジュールを用います。main.jsよりsub.jsのメソッドを実行する例です。

main.js
// sub.jsファイルを読み込む
import {hello} from "./sub";

// sub.jsに定義されたJavaScriptを実行する
hello();
sub.js
export function hello() {
  alert("helloメソッドが実行された。");
}

webpackの設定ファイル

webpackの設定は、webpack.config.jsにて行います。

webpack.config.js
module.exports = {
  // メインのJS
  entry: "./src/main.js",
  output: {
    filename: "build/bundle.js"
  }
}

Gulpのタスク定義

Gulpとwebpackを用いて、JavaScriptのモジュールを解決する為のタスクを定義します。

gulpfile.js
// 必要プラグインの読み込み (var gulp = ~ でも可)
const gulp = require("gulp");
const webpackStream = require("webpack-stream");
const webpack = require("webpack");

// webpackの設定ファイルの読み込み
const webpackConfig = require("./webpack.config");

// タスクの定義。 ()=> の部分はfunction() でも可
gulp.task("default", () => {
  // ☆ webpackStreamの第2引数にwebpackを渡す☆
  return webpackStream(webpackConfig, webpack)
    .pipe(gulp.dest("dist"));
});

ポイントとなるのはwebpackStream()の第2引数にwebpackを渡すことです

タスクの実行

次のコマンドでGulpのタスクを実行します(※ npx コマンドについては記事「npm 5.2.0の新機能! 「npx」でローカルパッケージを手軽に実行しよう」を参考にしてください)。

コマンドライン
npx gulp

コマンドラインの出力を見ると、webpack 3が使われていることがわdかります。

最後に

webpackがあればGulpは不要という声もよく聞きますが、個人的にはJavaScriptのモジュール解決のみにwebpackを用い、その他はGulpでタスクを定義するのが一番見通しよくタスクを定義できると考えています。どちらか一方を使うのではなく、それぞれのメリットを吟味しながら、最適なタスク定義を行いましょう。