【Webpack】開発サーバーを起動する

パッケージのインストール

開発サーバーを起動するには「webpack-dev-server」を使います。

npm i -D webpack-dev-server

Bash

設定ファイル

const path = require('path');

module.exports = {
    mode: 'development',
    output: {
        path: path.resolve(__dirname, 'dist')
    },
    devServer: {
        static: {
            directory: path.resolve(__dirname, 'dist') // 出力先のディレクトリを指定
        },
        open: true, // サーバー起動時にブラウザを自動的に開く
        hot: true, // ホットリロードの有効化
        watchFiles: ['src/**/*.html'] // 監視対象のファイルにhtmlを追加
    }
}

webpack.config.js

webpack-dev-serverを起動するには、以下のコマンドを実行します。

npx webpack serve

Bash

開発環境用(webpack.dev.js)のファイルに設定を追加した場合は、以下のコマンドを実行します。

npx webpack serve --config webpack.dev.js

Bash

distディレクトリにファイルを出力させる

webpack-dev-serverを起動している際、distディレクトリにファイルが生成されないことに気が付いたでしょうか？

これは、webpack-dev-serverがメモリ上でファイルを管理しリアルタイムでの更新を提供しているためファイルが出力されません。

htmlファイルでLPやホームページを作成している場合は、html-webpack-pluginを使用してJavaScriptやCSSなどを自動でインジェクトすれば問題ありませんが、PHPファイルなどのWebpackでは扱えないファイルを使う場合はメモリ上でファイルを管理するのではなく出力することが望ましいです。

以下の設定は、webpack-dev-serverでファイルを出力させる設定です。

const path = require('path');

module.exports = {
    mode: 'development',
    output: {
        path: path.resolve(__dirname, 'dist')
    },
    devServer: {
        static: {
            directory: path.resolve(__dirname, 'dist')
        },
        open: false, // ブラウザを自動的に開かない
        hot: false, // ホットリロードの無効化
        devMiddleware: {
            writeToDisk: true, // ファイルを出力させる
        }
    }
}

webpack.config.js