webpackでJSファイルをまとめる手順

一つのJavaScriptファイルに長い処理を書くと、可読性が悪くなります。これを解決するには複数ファイルへ分割することでしょう。Node.jsの界隈では、機能ごとに分割されたJavaScriptファイルのことを一般的に「モジュール」と呼びます

160519_javascript_module

JavaScriptをモジュールで書くにはお作法があり、2017年現在は標準仕様のECMAScript Modules(略してES Modules、もしくはESM)で書くのが一般的です。

少し古いブラウザではJavaScriptのモジュールを取り扱うための仕組みがなかったため、モジュールを取り扱うための仕様が長いこと検討されてきました。代表的なものにCommonJS、AMD、ES2015のModules等があります。

webpackで、モジュールとしてのJavaScriptを結合していきましょう。

JavaScriptモジュールの使用例

ES ModulesのJavaScript処理を例にして説明します。ES Modulesをはじめて見る方は小難しく思うかもしれませんが、これからのJavaScriptの基本知識になるはずなので頑張って読み進めてください。

この記事で解説するサンプルはGitHubからダウンロードできます。

main.jssub.jsに定義されたhello()メソッドを呼び出す仕組みを考えてみます。ES Modulesの仕様に沿った記法としては、次のようなコードとなります。

▼main.js

// import 文を使って sub.js ファイルを読み込む。
import {hello} from './sub';

// sub.jsに定義されたJavaScriptを実行する。
hello();

▼sub.js

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

JavaScriptモジュールはこのままだと古いブラウザ(例:IE 11)で使用できないため、ブラウザが解釈できる形に変換する必要があります。そこで登場するのがwebpackです。

webpackでJavaScriptモジュールを扱う

webbpackを使うと、JavaScriptモジュールをブラウザで扱える形に変換できます。webpackの設定はwebpack.config.jsというファイルを作成して記述します。

▼webpack.config.jsファイル

module.exports = {
  // メインとなるJavaScriptファイル(エントリーポイント)
  entry: './main.js',
  // ファイルの出力設定
  output: {
    //  出力ファイルのディレクトリ名
    path: `${__dirname}/`,
    // 出力ファイル名
    filename: 'bundle.js'
  }
};

main.jsのようにメインとなる処理を行うJavaScriptファイル「エントリーポイント」と呼びます。エントリーポイントをコマンドでビルドします。webpackでは出力ファイルの指定を絶対パスで指定する必要があるため、__dirnameパラメーターでプロジェクトフォルダーを指定しています。

それでは、コマンドラインで次のビルドコマンドを入力してみましょう。

▼webpackによるビルド(コマンドライン)

npm run build

main.js内で必要なsub.jsが統合され、bundle.jsとして出力されます。bundle.jsには、import挙動の処理を現行のブラウザでも可能にするコードと、各モジュールの処理が含まれます。

160519_webpack_js_bundle

bundle.jsをHTMLで読みこむと、sub.js内の処理が実行されます。

▼ HTMLファイルでJSファイルを読み込む方法

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

次のページではwebpackでJavaScriptファイルをminifyする方法、ソースマップを使う方法、開発サーバーを立ち上げる方法を紹介します。