webpackの使い方

webpackとは

webpackとは、複数のJavaScriptのモジュールをまとめる（バンドル）ことのできるモジュールバンドラのこと。これを利用することで、ファイルを分割した開発や依存関係を気にすることなく開発できるなどのメリットがある。

webpackの使い方

webpackのインストール

webpackは、Node.jsのパッケージマネージャーであるnpmを使ってインストールすることができる。

$ npm install --save-dev webpack webpack-cli

ここで、webpackを使用するためにはwebpackのコマンドラインインターフェースであるwebpack-cliも一緒にインストールしておく。

webpack.config.jsファイルの作成

webpackを使用するにあたって、webpack.config.jsファイルを作成することで、エントリポイントのファイル名や出力ファイル名などを設定することができる。
エントリーポイントと出力ファイル名、フォルダを指定する場合は、以下のように書ける。

const path = require("path");

module.exports = {
    // エントリーポイント
    entry: `./src/index.js`,

    // ファイルの出力設定
    output: {
        // バンドルされた出力ファイル名
        filename: "bundle.js",
        //  出力先ディレクトリ名とパス
        path: path.join(__dirname, "dist"),
    },
};

ここで、webpack.config.jsを設定しない場合は以下のデフォルト値が設定されている。
■ entry: ./src/index.js
■ output: ./dist/main.js

webpackの実行

webpackは、次のコマンドで実行できる。

$ npx webpack