webpack 入門設定ファイルに entry を設定してみよう

2020年11月1日

前回に引き続き webpack の入門です。

今回は以前少し登場した entry オプションを設定ファイルに記述します。

entry を設定する

まず index.js を app.js などに名前を変更します。

// 中身は変わりません
const hoge = require('./helper');

console.log(hoge());

以下のコマンドを実行してみます。

$ npx webpack

中略

Module not found: Error: Can't resolve './src' in '/Users/admin/project/webpack-test'

webpack は、entry オプションが指定されていない場合は、デフォルトでは index.js を起点にしてバンドルする、ということを記載しました。

index.js を探しますが、存在しないためにエラーになります。

では、webpack.config.js に entry を指定します。

module.exports = {
  mode: "development",
  entry: "./src/app.js"
};

エラーが解消されて、正常に main.js が出力されるようになります。

今の実装では、src/app.js の中で src/helper.js をインポートしているので、app.js が起点になっています。

しかし、app.js と helper.js が互いに依存関係がない場合は、この二つのファイルが起点になります。

そのような場合は、entry に配列を指定します。

まず、app.js と helper.js を以下のようにして、お互いに依存がないようにします。

console.log("app");

console.log("helper");

webpack.config.js は以下のようにします。

module.exports = {
  mode: "development",
  entry: ["./src/app.js", "./src/helper.js"]
};

これで実行すると、main.js というファイルの中に、app.js と helper.js が依存がない状態で出力されます。

依存があった場合と比べると main.js の中身が変わったのがわかると思います。

上記の例では、依存がない二つのファイルを一つのファイルにバンドルしました。

それでは、二つのファイルを二つのファイルに出力したい場合はどのようにすればいいでしょうか。

entry にオブジェクトを指定することで可能です。

module.exports = {
  mode: "development",
  entry: {app: "./src/app.js", helper: "./src/helper.js"}
};

実行すると、dist 配下に app.js と helper.js という二つのファイルが出力されます。

(main.js というファイルがあるかもしれませんが、それは以前出力されたものが残っているだけです)

参考