フリーランスでWebサイト制作を行う時に、まず最初に必要なのはローカル開発環境構築です。開発環境を整える手順をまとめてみました。まずは、JavaScriptファイルのバンドル化です。

開発手順

1. プロジェクトフォルダの作成（またはGithubからclone）
2. package.jsonファイル生成
3. webpackのインストール
4. webpack.config.jsファイルの作成

プロジェクトフォルダの作成

まずは開発を行うフォルダを作成し、ターミナルで移動しておきます。
githubからコードを持ってくる場合はcloneして完了です。

package.jsonファイルの生成

プロジェクトフォルダ内で「npm init -y」を実行し、package.jsonファイル生成します。
次に、webpack, webpack-cli（コマンドラインで使用できるように）, webpack-dev-server（webサーバー:ファイルの監視用に必要）をインストールしておきます。

// 初期化：package.jsonファイル生成
npm init -y

// プロジェクトフォルダ内にwebpackと関連パッケージをインストール
npm install -D webpack webpack-cli webpack-dev-server

package.jsonファイルにコマンドを追加

package.jsonファイル内にシェルスクリプトのエイリアスを登録しておきます。
具体的には、”scripts”:内に「”build”: “webpack」を追記と追記することで、「npm run build」とコマンドを打てばwebpackが実行されるようにします。

scriptsに本番用と開発用の２種類を用意しておくと、「npm run build」コマンドで本番用、「npm run dev」で開発用とビルドを分けることができるようになります。

–mode=production：本番用ビルド
–mode=development：開発用ビルド

  "scripts": {
      "dev": "webpack --mode development",
      "build": "webpack --mode production",
      "watch": "webpack --watch"
  },

jsファイルを変更する度にbuildコマンドを打つのは面倒なので、watchもついでに記述しておきます。

srcフォルダの下にjsファイルを複数用意し、「npm run build」コマンドでdistフォルダ内にバンドルされたmain.jsファイルが生成されているかチェックしておきましょう。

npm run build

また、「npm run watch」コマンドを実行後、jsファイルが編集される度にmain.jsファイルが更新されることも確認しておきます。

次から、jsファイルの生成場所やファイル名などをプロジェクトに合わせてカスタマイズしていきましょう。

webpack.config.jsファイルの作成

package.jsonと同じ階層にwebpack.config.jsファイルを作成します。
entry: で最初に読み込むjsファイルを指定し、output:で出力フォルダやファイル名を自由に設定できます。

const path = require('path');
const outputPath = path.resolve(__dirname, 'dist');

module.exports = {
    mode: "production",
    devServer: {
        contentBase: outputPath
    },
    entry: './src/index.js',
    output: {
        path: outputPath,
        filename: 'index.js',
        publicPath: 'dist/',
    }
}

ここまでの設定で、jsファイルが更新される度に差分がビルドされるようになりました。
次の記事では、webpackでsassファイルをコンパイルできるように設定していく手順を紹介していきます。

Node.jsのインストールまでは、新しいPCを購入したら必ず行う設定について書いてある記事にまとめています。

＞＞＞新しいMacを購入したら必ずインストールするアプリと設定一覧