【webpack】 entryとoutputの設定を把握しよう

2022年2月13日2022年2月13日 souki202

srcディレクトリの場所が違う、異なる名前でjsを出力したい、複数のエントリーを作りたいといった設定を紹介します。

1 エントリーや出力の参照先を変える
2 webpack.config.jsも移動する
3 出力するファイル名を変える
4 エントリーを分ける (複数のファイルに分ける)
5 まとめ

エントリーや出力の参照先を変える

project/
├ app/
│ ├ dist/
│ │ ├ js/
│ │ └ index.html
│ └ src/
│ 　 └ index.js
├ package-lock.json
├ package.json
└ webpack.config.js

srcとdistをappディレクトリ内に入れてみました。webpack.config.jsはこうなります。

// ディレクトリを変えた
const src = "/app/src/";
const dist = "/app/dist/assets";

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

entryとoutputの各種パスを変えました。移動しただけですね。

webpack.config.jsも移動する

webpack.config.jsをapp内に移動してみます。

project/
├ app/
│ ├ dist/
│ │ ├ js/
│ │ └ index.html
│ ├ src/
│ │ └ index.js
│ └ webpack.config.js
├ package-lock.json
└ package.json

このままでは、projectsをワーキングディレクトリとしてビルとしようとしても、設定ファイルが見つからない扱いになってしまいます。npxで実行する際は実際にpackage.jsonなどがあるディレクトリが基準となるためです。

そこで, 読み込む場所をコマンド側で指定します。

{
  // ...

  "scripts": {
    "dev": "webpack --mode development --config ./app/webpack.config.js",
    "build": "webpack --mode production --config ./app/webpack.config.js",
    "watch": "webpack --mode development --watch --color --progress --config ./app/webpack.config.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}

--config ./app/webpack.config.jsが増えていますね。ここでファイルの場所を指定しています。また、ビルドする際のパスは設定ファイルの場所が基準だったり、package.json等がある場所基準だったりするので、書き換える必要があります。

const src = "/app/src/";
const dist = "/dist/assets";

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

ここで, entryはpackage.jsonなどがあるディレクトリ基準で設定します。

outputは、__dirnameがwebpack.config.jsがある場所基準になるので、そうなるように絶対パスを組みます。

出力するファイル名を変える

outputよりもentryのキーを変更するほうが手っ取り早いです。

const src = "/src/";
const dist = "/dist/assets";

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

[name]は, entryの連想配列のキーが使われます。

この場合、app.bundle.jsが出力されます。もちろん、[name].jsとすればapp.jsが出力されます。

エントリーを分ける (複数のファイルに分ける)

例えば、管理画面用ページのjsと、それ以外のページのjsを分けるなど、利用するjsを別々にしたい場合もあります。その場合、entryを分けます。

このようなファイル構成だったとします。

project/
├ dist/
│ ├ js/
│ └ index.html
├ src/
│ ├ admin.js
│ └ usr.js
├ webpack.config.js
├ package-lock.json
└ package.json

この場合、次のようにentryを分けます。

const src = "/src/";
const dist = "/dist/assets";

module.exports = {
    entry: {
        admin: src + "admin.js",
        user: src + "user.js",
    },
    output: {
        filename: "[name].bundle.js",
        path: __dirname + dist,
    }
}

増えていることがわかります。admin.jsからはadmin.bundle.jsが、user.jsからはuser.bundle.jsが出力されます。