- まず、プロジェクトのルートディレクトリに移動し、次のコマンドを使用してwebpackとwebpack-dev-serverをインストールします。
npm install webpack webpack-dev-server --save-dev- プロジェクトのルートディレクトリにwebpack.config.jsという名前のファイルを作成します。このファイルには、webpackの設定が含まれます。以下は、基本的な設定の例です。
const path = require('path');
module.exports = {
entry: './src/index.js', // エントリーファイルのパス
output: {
path: path.resolve(__dirname, 'dist'), // 出力ディレクトリのパス
filename: 'bundle.js' // 出力ファイルの名前
},
module: {
rules: [
// JavaScriptファイルをバンドルするためのローダーの設定
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader'
},
// CSSファイルをバンドルするためのローダーの設定
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
// 画像などのアセットファイルをバンドルするためのローダーの設定
{
test: /\.(png|svg|jpg|gif)$/,
use: 'file-loader'
}
]
},
devServer: {
contentBase: path.resolve(__dirname, 'dist'), // サーバーのルートディレクトリ
port: 8080 // ポート番号
}
};-
プロジェクトのルートディレクトリにsrcディレクトリを作成し、その中にエントリーファイル（例: index.js）を作成します。また、必要な場合はCSSファイルやアセットファイルもsrcディレクトリ内に配置します。
-
コマンドラインで以下のコマンドを実行して、webpack-dev-serverを起動します。
npx webpack serve --config webpack.config.jsこれにより、webpackはエントリーファイルから依存関係を解決し、バンドルされたファイルをメモリ上に生成します。また、サーバーも起動され、コンパイルされた静的コンテンツが提供されます。
- ブラウザで http://localhost:8080 を開くと、コンパイルされた静的コンテンツが表示されます。
以上が、webpackを使用して静的コンテンツをコンパイル、ディスクに書き込み、提供する方法です。必要に応じて、webpackの設定やローダーの設定を調整して、プロジェクトの要件に合わせてカスタマイズすることができます。