前回はwebpackの設定なしにwebpackを動作させました。

webpackはデフォルトでも動作しますが、設定ファイル(webpack.config.js)で設定を変更出来ます。今回はwebpackの設定を行いwebpackを実行します。なお、今回は前回の続きとして説明させて頂きます。

設定ファイルの置き場所

基本的にはwebpackのインストールを行ったディレクトリに webpack.config.js(webpackの設定ファイル) を作成します。

今回は以下のようなディレクトリ構成となります。jsファイルの位置が前回と異なりますので気をつけて下さい。なお、jsの内容は前回と同じなので説明は割愛します。

.
├── node_modules
├── package-lock.json
├── package.json
├── src
│   └── js
│       ├── index.js
│       └── test.mjs
└── webpack.config.js

設定の基本

webpack.config.js は javascript(common.js)形式で記載する事が可能です。まずは基本の設定である “entry”、”output” について記載します。なお、設定ファイルに記載する順番に決まりはないです。

'use strict'

const path = require('path')

module.exports = {
  entry: './src/js/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  }
}

entry

webpack実行時、webpackがはじめに読み込むjsファイルを指定します。webpackはこのエントリポイント(はじめに読み込むjsファイル)から、エントリポイントに記載された import を辿ってバンドルファイルを作成します。

この例の場合、”./src/js/main.js” がwebpackからはじめに読み込まれるファイルになります。main.js にimport がある場合、importされるjsファイルもバンドルされます。更に import される jsファイル も別の jsファイル を import する場合、その jsファイル もバンドルされます。このようにwebpackは import を辿って1つのファイルを作成します。

output

webpackがバンドルファイルを出力する先のパスとファイル名を指定します。

この例の場合、distディレクトリへmain.jsが出力されます。

webpackの実行

webpackを実行します。

npx webpack
asset main.js 47 bytes [compared for emit] [minimized] (name: main)
orphan modules 59 bytes [orphan] 1 module
./src/js/index.js + 1 modules 116 bytes [built] [code generated]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

webpack 5.103.0 compiled with 1 warning in 257 ms

dist ディレクトリが作成され、その下にmain.jsが生成されました。警告(WARNING)が表示されますが、バンドルファイルの生成には成功します。

.
├── dist
│   └── main.js
├── node_modules
├── package-lock.json
├── package.json
├── src
│   └── js
│       ├── index.js
│       └── test.mjs
└── webpack.config.js

main.js を実行します。

node dist/main.js
hello!!

次回

webpackの実行時に警告が出ていました。mode オプションを設定して下さいとのことなので、modeオプションを設定し警告を解消します。