Webpackの導入方法

普段の作業でWeb制作をしていることが多いので、”Webpack V5″というモジュールバンドラーを使ってみることになった。最初は、”Parcel V2″を使おうと思ったのだが、確かにお手軽に設定して使うことが出来るようになったのだけども、トランスパイル（コンパイル的なイメージ）をしたところ、PHPコードがごっそり取り除かれていたので、自分が使うメモとしてWebpackの導入手順を走り書きしておくことにした。

“Webpack V5″のインストール

作業ディレクトリの作成

[userdir$] mkdir {workdir}

作業ディレクトリを作成。作成したら作業ディレクトリに移動するのを忘れずに！

“npm init -y”を実行

[workdir$] npm init -y

初期化された”package.json”を作成。

“npm install -D webpack webpack-cli”を実行

[workdir$] npm install -D webpack webpack-cli

ちゃんと２つともインストールすること。片方でも足りないとダメ！

“npx webpack-cli init”を実行

[workdir$] npx webpack-cli init

“npm”コマンドでは無く、”npx”であることに注意！

対話形式でセッティング

結構質問される。10個くらい質問される。だいたい[Y/n]で答えれば良い。

webpack.config.js の自動生成（インストール）

すべての質問に答えるとインストール（Webpackが使える設定）が自動で行われる。
“package.json”を上書きするかどうか聞かれる時に6つくらいの選択肢が出るが、多分”a”で良いと思う（すべて上書き）。

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "webpack --mode=production --node-env=production --color",
  "build:dev": "webpack --mode=development --color",
  "build:prod": "webpack --mode=production --node-env=production --color",
  "watch": "webpack --watch --color",
  "serve": "webpack serve --mode=development --color"
},

↑ 個人的な好みで"--color"（カラーオプション）を追加しているが使えるコマンドはこんな感じ。。。

webpack.config.js の編集

最後に、次の文字列を追加。

{
  ...... (略)
  watchOptions: {
    ignored: "/node_modules/",
  },
};

変換時に “node_modules”ディレクトリ を無視するようになる？

設定が自動生成できた

ちゃんとPHPコードも出力されている。とりあえずこれで、”Parcel V2″ほどじゃないが導入手順がシンプルになった。