Webpackの導入手順

Webpackの導入は以下の手順で行う

1. npmを初期化してpackage.jsonファイルを作成

   npm init -y
   

2. WebpackとWebpack CLIをインストール

   npm install --save-dev webpack webpack-cli
   

3. webpack.config.js設定ファイルをプロジェクトのルートに作成し、設定を記述。ここではバンドルするindex.jsをentryに記述、バンドルされたファイル名をbundle.jsとしてoutputに書く。

   const path = require('path');
   
   module.exports = {
     entry: './src/index.js', // エントリーポイント
     output: {
       filename: 'bundle.js', // 出力ファイル名
       path: path.resolve(__dirname, 'dist'), // 出力ディレクトリ
     },
   };
   

これで基本的なWebpackの環境はこれで完了です。
次は実際にpjで導入したことを書こうと思います。