webpackのoutputプロパティの使い方

webpackのoutputプロパティは、バンドルされたファイルの出力先やファイル名を指定するために使用します。これにより、生成されたファイルの管理が容易になり、必要に応じて適切な場所に配置できます。

以下では、outputプロパティの使い方について詳しく解説します。

基本的な設定

outputプロパティは、webpackの設定ファイル内で次のように指定します。

const path = require('path');

module.exports = {
    output: {
        path: path.resolve(__dirname, 'dist'), // 出力先のディレクトリを絶対パスで指定
        filename: 'bundle.js' // 出力するファイル名
    }
}

pathプロパティに設定する出力先ディレクトリは、絶対パスで指定する必要があります。相対パスで指定すると、webpackでエラーが発生します。

上記の設定では、バンドルされたファイルがdistディレクトリにbundle.jsとして出力されます。

動的なファイル名

ファイル名を動的に設定することも可能です。例えば、[name]を使うことでエントリーポイントの名前を基にしたファイル名を指定することができます。

const path = require('path');

module.exports = {
    entry: {
        sub1: './src/sub1.js',
        sub2: './src/sub2.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].bundle.js' // エントリーポイント名に基づいたファイル名
    }
}

上記の設定では、entryオブジェクト内のプロパティがsub1とsub2なので、出力ファイルはsub1.bundle.jsとsub2.bundle.jsとなります。

キャッシュバスティング

ファイル名に[contenthash]を追加することで、ファイルの内容が変更されたときにのみ新しいファイル名が生成されるようになります。これにより、ブラウザキャッシュの問題を回避できます。

const path = require('path');

module.exports = {
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.[contenthash].js' // ファイル名にハッシュを付与する
    }
}

上記の設定では、バンドルされたファイルがdistディレクトリに出力されます。ファイル名には、英数字のハッシュ値が付与されています。