Webpackとは

複数あるJavaScriptファイルを一つもしくは複数のファイルにまとめる(バンドル)ためのパッケージ。
静的モジュールバンドラー。

なぜ使うのか

ファイルをまとめることで、ブラウザからソースにアクセスする際のリクエスト数の低減、ファイルサイズの縮小など、転送効率向上のメリットがあるため。
開発中は適切なディレクトリ構成で開発し、ソースを公開する際にはwebpackを使ってバンドルしたソースを公開する。

使い方

0. 環境
   • OS: mac
   • node.js: v18.15.0
   • npm: 9.5.0
1. プロジェクトを作成

npm init -y 

2. webpackとwebpack-cli をプロジェクトにインストール
   ※開発時のみで使用するパッケージのためdevDependanciesに含める。

// webpackはv5を使用
npm i -D webpack webpack-cli

3. 適当にソースを作成

├── node_modules
├── package.json // scriptにwebpackコマンドを追記しておく
├── package-lock.json
├── src
│    ├── index.js // sayByeとsayHelloをインポートして実行
|    ├── sayBye.js // console.log('bye')を実行する関数をエクスポート
│    └── sayHello.js // console.log('hello')を実行する関数をエクスポート

4. webpackコマンドを実行

// package.jsonのscriptに追記したbuildコマンドを実行("build": "webpack")
npm run build

上記コマンドによってソースのトップレベルにdist/main.jsが作成されていれば成功。
main.jsの中身を見れば、srcディレクトリ配下のコードがまとまっていることがわかる。

設定ファイルの作成

ソースのトップレベルにwebpack.config.jsを作成し、ファイル内に細かなバンドルの設定を書き込めばwebpackがそれに倣ってバンドルを実行してくれる。

module.exports = {
　// 設定内容を書く
};

よく使う設定項目

entry

バンドルの起点となるファイルを指定することができる。デフォルトで./src/index.jsが指定されている。

entry: "./src/index.js",

output

出力ディレクトリとファイル名を指定することができる。デフォルトでdist/main.jsが指定されている。

// node.jsのpathモジュール
const path = require("path")
output: {
　// 出力ファイルまでのパス
    path: path.resolve(__dirname,'dist'),
　// 出力ファイル名
    filename: "main.js"
},

mode

出力結果をproduction用かdevelopment用のどちらかに設定できる

mode: "development", // or "produciton"

• developmentモード
  開発用。ソースマップに対応したコードが出力される。ビルド時間は短いが、容量が大きくなる。
• productionモード
  プロダクション用。圧縮されるため容量が小さくなる。また、ソースが難読化される。ビルド時間が長い。

webpack+electron+nodemon(webpack-nodemon-plugin)

electron環境でwebpackでビルド（バンドル）、nodemonを使ってメイン/レンダラの区別なくアプリをリスタートする仕組みが必要だったため、上記組み合わせで実装。

前提

electornで開発、webpackでビルドしている。

インストール

npm i -D webpack-nodemon-plugin

webpackの設定ファイルを書く

// プラグインのインポート
const NodemonPlugin = require('nodemon-webpack-plugin');
// npm スクリプトで設定した環境変数によって開発orプロダクションを判定する
const isDev = process.env.NODE_ENV === 'development';

const main :Configuration = {
  target: 'electron-main',
  mode: isDev ? 'development' : 'production',
  watch: isDev, // watchモード（今回必須）
  ...
  plugins :[
   new NodemonPlugin({
      watch: './build', //監視対象のディレクトリ
      ext: 'js, jsx, json, html', // 監視対象のファイルの拡張子
      exec: 'electron .', // リスタートコマンド
   }),
  ]
}

npm スクリプトを書く

...
"scripts" : {
  "start" : "cross-env NODE_ENV=\"development\" webpack --progress", 
}

動作

1. startコマンドでwebpack watchモードが開始、アプリがビルド(buildディレクトリ)される。
2. buildディレクトリ内の変更をnodemonが検知
3. アプリをリスタート

純粋なnodemonとwebpackの組み合わせでできないのか

nodemonとwebpackを使ったやり方だと、watchモードが邪魔をして初期起動時にnodemonが働いてくれなかった。（rsコマンドでリスタートすれば動くけど）issueとか漁ったが、簡単にできる方法はあまりなさそうだった。