Help us understand the problem. What is going on with this article?

Gulpで始めるwebpack 4入門

More than 1 year has passed since last update.

webpackは複数ファイルのJavaScriptファイルやCSS、画像ファイルをモジュールとして取り扱う為の人気のツールです。2018年7月時点の最新バージョンは4.16(いちろく、ではなくじゅうろく)です。

webpackの公式サイト

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

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

なお、webpackについて詳しくは記事「最新版で学ぶwebpack 4.8入門 - JavaScriptのモジュールバンドラ - ICS MEDIA」を参照ください。

環境準備

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

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

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

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

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

※1 webpackをCLIで使う場合はwebpack-cliが必要ですが、Gulp経由で使用する場合は不要です。
※2 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門 - JavaScriptのモジュールバンドラ - ICS MEDIA」を参照ください。

webpack.config.js
module.exports = {
  // モード値を production に設定すると最適化された状態で、
  // development に設定するとソースマップ有効でJSファイルが出力される
  mode: "production",

  // メインのJS
  entry: "./src/main.js",
  // 出力ファイル
  output: {
    filename: "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 4が使われていることがわdかります。

image.png

最後に

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

連載一覧

- ECMAScript 2015+編

Gulpの解説についてはこちら

tonkotsuboy_com
ICSのインタラクションデザイナーです。「JavaScriptコードレシピ集」の著者。CSS Nite 2017・2018でベストセッションの1人に選出されました。 アプリ開発やWebページ制作が専門で、フロントエンドの情報を随時発信しています。猫の名前は「うに」です。九州大学芸術工学部音響設計学科出身。
https://ics.media
ics
インタラクションデザイン専門のプロダクション。最先端のウェブテクノロジーを駆使し、オンスクリーンメディアの表現分野で活動しています。最新のウェブ技術を発信するサイト「ICS MEDIA」を運営。
https://ics.media/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした