前回はwebpackの概要を説明しました。

今回はwebpackのインストールし簡単に動作を確認します。なお、node.jsがインストールされている事を前提とします。node.jsのインストールについては以下を参考にして下さい。

JSファイルの構成

ディレクトリ構成

今回は src ディレクトリ以下に2つのファイルを配置します。
これは webpack がデフォルトで読み込むディレクトリが src 以下になるからです。

以下のような構成になります。

.
└── src
    ├── index.js
    └── test.mjs

ファイルの内容

index.js

import {sample} from './test.mjs'
console.info(sample());

test.mjs

function sample(){
    return 'hello!!'
}

export {sample};

index.js が test.mjs を読み込む事を想定しています。

ちなみに、実行結果は以下の通りです。

node src/index.js 
hello!!

Webpackのインストール

下記コマンドを実行し、webpackをインストールします。

npm i --save-dev webpack webpack-cli

説明

webpackの基本はこの2つモジュールになります。

webpack

webpack 本体です。

webpack-cli

webpack-cli はターミナルからwebpackのコマンドを実行する為のパッケージです。

package.json

webpackをインストールすると package.json と package-lock.json が作成されます。
ディレクトリ構成は以下のようになります。

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

ちなみに中身は以下のようになっていて、webpack と webpack-cli がインストールされている事が分かります。

{
  "devDependencies": {
    "webpack": "^5.103.0",
    "webpack-cli": "^6.0.1"
  }
}

webpackの実行

webpackを実行します。

npx webpack

dist ディレクトリが作成され、その下に main.js というファイルが作成されます。これがwebpackがバンドルした結果のファイルになります。

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

main.js を実行します。

node dist/main.js
hello!!

バンドル前と同じ結果が出力されました。

webpackの動き

webpackはsrcディレクトリ以下のjsファイルを読み込み解析し、各jsファイルに記載された import を通じて複数のjsファイルを一つのjsファイルにバンドルします。
今回は index.js が test.mjs をインポートしているので、それらが一つのファイル(main.js)として出力されました。

次回

今回はwebpackに何も指定せずデフォルトで実行しました。次回はwebpackを設定を変更してみたいと思います。