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

今の時代はモジュール方式でJavaScriptを書くのが当たり前

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

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

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

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

モジュール方式のJavaScriptを書いてみよう

ES ModulesのJavaScript処理を例にして説明します。ES Modulesをはじめて見る方は小難しく思うかもしれませんが、これからのJavaScriptの基本知識になるはずなので頑張って読み進めてください。この記事で解説するサンプルはGitHubからダウンロードできます。

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

▼index.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モジュールを扱う

webpackを使うと、JavaScriptモジュールをブラウザで扱える形に変換できますindex.jsのようにメインとなる処理を行うJavaScriptファイル「エントリーポイント」と呼びます。エントリーポイントをコマンドでビルドします。

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

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

npx webpack

index.js内で必要なsub.jsが統合され、distフォルダーのなかにmain.jsとして出力されます。

このwebpackで出力したdistフォルダー内のファイルmain.jsをHTMLで読みこむと、バンドルされたコードが実行されます。

ビルドしたファイルは次のリンクで確認できるので、見てみましょう。

あっけなくwebpackのビルドができましたね。フォルダー構造もいたってシンプルなのは、webpack 4になって構成が簡単に組めるようになったためです。webpackの基本的な使い方の紹介は以上となりますが、さらに覚えておいたほうが役立つ知識があるので解説していきます。

▲webpackは複数のファイルの依存関係を考慮したうえで自動的に結合する

package.jsonをカスタマイズする

npx webpackコマンドでビルドするのもシンプルですが、実際の開発ではnpm scriptsを使う方が便利です。npm scriptsとはコマンドのショートカット(エイリアス)を貼るための機能。package.jsonファイルのscriptsには、webpackのビルドコマンドを追加します。

package.jsonファイル

{
  "scripts": {
    "build": "webpack"
  },
  "devDependencies": {
    "webpack": "^4.5.0",
    "webpack-cli": "^2.0.14"
  }
}

package.jsonファイルには最低限scriptsdevDependencies指定が記述されてあれば使えます。namelicenseなどは消してしまって大丈夫です。

こうしておけば、npm run buildとコマンドラインで入力することで、内部的にwebpackが呼び出され、先程の手順と同じ結果が得られます。npm scriptsの詳細は記事「Node.jsユーザーなら押さえておきたいnpm-scriptsのタスク実行方法まとめ」で詳しく解説してるので参考ください。

webpack.config.jsをカスタマイズする

webpack.config.jsファイルを用意することで、webpackの挙動を調整できます。よく使う設定として、エントリーポイントを指定するentryと、出力フォルダーをカスタマイズするoutputがあります。これらは必須ではないもの、よく使うオプションのため必ず抑えておきましょう。次のように指定します。

▼webpack.config.jsファイル

module.exports = {

  // メインとなるJavaScriptファイル(エントリーポイント)
  entry: `./src/index.js`,

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

webpack 4では、エントリーポイントを指定しなければ自動的に「src/index.js」がエントリーポイントに、出力先を指定しなければ自動的に「dist/main.js」に出力されます。

output.pathオプションを省略することもでき、その場合は出力ファイルは「dist」フォルダーに出力ファイルが生成されます。

▼webpack.config.jsファイル

module.exports = {

  // メインとなるJavaScriptファイル(エントリーポイント)
  entry: `./src/index.js`,

  // ファイルの出力設定
  output: {
    // 出力ファイル名
    filename: 'main.js'
  },
};

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