webpack.config.jsの書き方

そもそもwebpackとは

複数のjavascriptファイルやcss、画像などを一つのファイルにまとめることができる
（なぜ、そんなことをするのか、理由は以下に記載）

メリットは何？

昨今、可読性を上げるため、保守がしやすい設計にするためにモジュールごとに分けてファイル分割をして、プロジェクト（アプリ）を作成します。
そうすると、当然、ファイル数が増え、ブラウザ側でのリクエストが増えることになり、もっさりとした動きのプロジェクトになります。
そこで、webpackの登場です。
複数のjavascriptファイルやcss、画像などを一つのファイルにまとめることでブラウザへのリクエストが減り、非常に高速に動くプロジェクトへ生まれ変わります。

webpack.config.jsの基本的な書き方

const path = require('path');

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

• entry -> 最初に読み込むファイルを指定
  • ここで指定されたファイルから別のファイルを読み込む処理が書かれていると、webpack はそれらのファイルも自動的に読み込んで、最終的に1つのファイルとして出力してくれます
• output -> 読み込んだファイルを一つにまとめた（バンドルした）ファイルの出力先を指定

  • path -> __dirnameはルートディレクトリ（webpack.config.jsのあるディレクトリ)を指す、つまり、絶対パスで出力するディレクトリを指定している（以下参照）

  • filename -> バンドルした際に出力するファイル名を指定する

  • publicPath -> 出力先のディレクトリがうまく認識できない場合があるため、念の為に出力するファイルの親ディレクトリを指定する

コラム

path.resolve()について

引数の絶対パスを返す
なぜ、わざわざ関数を使用して絶対パスを指定するのか
環境によってパスの表記が違うから環境に合わせた絶対パスを返してくれるpath.resolve()を使用することが望ましい

# /Users/shindo/dev/markdown-editorにいる
# REPLで試す
# path.resolveは指定したファイルやディレクトリの絶対パスを返す

% node
> const path = require('path');
undefined
> path.resolve('README.md')
'/Users/shindo/dev/markdown-editor/README.md'

参考

最新版で学ぶwebpack 5入門