webpackの基本だけどハマりやすいentryの設定と[name]

webpackとエントリーポイント

皆様、webpackは使っていますか？
一部では脱webpackという流れもあるような話を見かけましたが、
私はwebpack大好きでJS関連のプロダクトの場合はとりあえず入れてます。

しかし、webpackにはわかりづらい点があります。

loaderやruleあたりのチェインもそれなりにわかりづらいのですが、¹
それ以前の基本的な設定である、entryと[name]の関連性です。

わかってしまえば簡単なのですが、私は最初ハマりました。
この記事はごく基本的なentryのことについて記載します。

entryとは

公式ドキュメントの以下のあたりに書いている
https://webpack.js.org/concepts/entry-points/

module.exports = {
  entry: './path/to/my/entry/file.js',
};

こういうやつです。

設定しない場合の挙動

entryを設定していない場合、webpackは

• ./src/index.jsを./dist/main.jsに出力する

という挙動になります。²

細かく書くと、

• ./src/index.jsをエントリーポイントとし
• index.js内でimport、requireされ使われているファイルをバンドルして
• ./dist/main.jsに出力する

という動きです。

entry,outputのデフォルト値

このデフォルトの挙動は、当然ながら設定で変更できます。
しかし、そもそものデフォルトの設定値がマニュアルには載っていません（たぶん）

デフォルトの設定値を記載すると、以下のようになります。

module.exports = {
  entry: './src',
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
};

これは、以下の設定しているのと同じことです。

module.exports = {
  entry: {
    main: './src'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
};

つまり、実質、

module.exports = {
  entry: {
    main: './src/index.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
};

としているのと同じです。

理解していないとハマる

これらのデフォルト値と挙動は、理解していないと少し複雑なことをしようとするとハマります。

例1：エントリーポイントと出力先を変更する

エントリーポイントを./src/js/entry.js
出力先を./dist/index.bundle.js
に変更したいとします。

例

module.exports = {
  entry: './src/js/entry.js'
  output: {
    filename: 'index.bundle.js',
    path: __dirname + '/dist'
  }
};

この例は動作します。

例2:複数のエントリーポイントを設定する

エントリーポイントを./src/js/entry.jsと、'./src/js/index.js'とし、
それぞれを./dist/entry.bundle.jsと./dist/index.bundle.jsに出力したいとします。

失敗例

module.exports = {
  entry: [
    './src/js/entry.js',
    './src/js/index.js'
  ],
  output: {
    filename: '[name].bundle.js',
    path: __dirname + '/dist'
  }
};

この例は失敗しmain.bundle.jsしか出力されません。 ³
想定通りに動かすには以下のように設定します。

成功例

module.exports = {
  entry: {
    entry: './src/js/entry.js',
    index: './src/js/index.js'
  },
  output: {
    filename: '[name].bundle.js',
    path: __dirname + '/dist'
  }
};

結論

以上のことからわかる、webpackの基本的なentryと[name]の設定についてまとめます。

[name]とはエントリーポイント名である

• エントリーポイントのファイル名ではありません

entryを配列や文字列で設定した場合、エントリーポイント名はmainになる

• [name]はmainに変換されます
• オブジェクトを使うことで複数のエントリーポイントを設定できます

この2点を抑えておけば、エントリーポイントと出力先周りでハマることは減るでしょう。

参考資料

webpackが何故必要で、 何故分かりづらいのか - Speaker Deck
https://speakerdeck.com/tomof/webpackgahe-gu-bi-yao-de-he-gu-fen-kariduraifalseka

私がこの記事に書いていることを理解したきっかけになったスライドです。⁴

1. いつか別記事に書きたい（といいつつこの記事も1年ぐらい下書きのままでした） ↩

2. もしsrc/index.jsが無い場合はERROR in Entry module not found: Error: Can't resolve './src' というエラーが発生します ↩

3. 私はかつて、これでwebpackはSPA向けで一つバンドルするしかできないと思いこんでいました ↩

4. まさしくbrowserifyとgulpの複雑さに疲れ果ててた頃でした…このスライドに感謝 ↩