【アプリ開発日記23】webpackでjsファイルを一つに。

ちゅーりん

2022年6月18日 19:58

「scriptタグが多すぎる」

　ということが最近よくあります。javascriptファイルを小分けにしたり、様々なライブラリを使用するとその数だけ増えていくのです。

　すると、規模が大きくなるとHTMLが見づらくなったり、複数ファイルになるので同時転送数にひっかかりロードに時間がかかったり。そこで、それらを解決してくれる「webpack」の簡単な使い方を備忘録にしました。

メリット

グローバル関数が競合しない
ロードが早くなる
フロントエンドに必要な手順（ローカルサーバーなど）を一か所でできる

使い方（初回）：build

作成するアプリごとに「npm init -y」から始めます。

参考サイト：

npm init -y
　→　「package.json」を作成

npm install -D webpack webpack-cli
　→　webpackをインストール

　また、手動で「webpack.config.js」と「src」フォルダ、その中に「index.js」を作成してください。webpack.config.jsの内容は以下の通りです。
※本番時は「mode: "development"」をコメントアウト

module.exports = {
    // メインとなるJavaScriptファイル（エントリーポイント）
    entry: `./src/index.js`,
  
    // ファイルの出力設定
    output: {
        //  出力ファイルのディレクトリ名
        path: `${__dirname}/dist`,
        // 出力ファイル名
        filename: "main.js"
    },

    // production(デフォルト) → 本番用。容量低、ビルド時間長、コメント省略
    // development → 開発用。ソースマップ有効
    mode: "development"
};

　すると、ここまででこんな感じになりました。今回は一つにまとまっているか確認するため、「sub.js」も作成しています。

先に結果を言ってしまうと、index.jsとsub.js、のちに自動で作成されるdist/main.jsの内容はそれぞれ以下のようになります。

--- index.js ---

import { hello } from "./sub";

hello();

--- sub.js ---

export function hello() {
    alert("helloメソッドが実行された。");
}

--- dist/main.js ---

(()=>{"use strict";alert("helloメソッドが実行された。")})();

最後に「package.json」に「"build": "webpack"」を追記して、「npm run build」コマンドを使えるようにします。

--- package.json ---

{
  "name": "220619_webpack",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"　
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0"
  }
}

ここまでできたら、コマンドラインで

npm run build

と入力すれば「dist」フォルダとその中に「main.js」が作成されているはずです！

　が、正直修正するたびにビルドするのも面倒です。そこで、自動で差分だけビルドしてくれるという機能があるので実装していきます。

使い方（2回目以降）：start / watch

使うものは「webpack-dev-server」モジュールとその「watch」機能。

さっそくインストールします。

npm i -D webpack webpack-cli webpack-dev-server

package.jsonに「"start": "webpack serve"」を追記。

"scripts": {
    "build": "webpack",
    "start": "webpack serve"
},

webpack.config.jsに「devServer」を追記。

module.exports = {
  // ローカル開発用環境を立ち上げる
  // 実行時にブラウザが自動的に localhost を開く
  devServer: {
    static: "dist",
    open: true
  }
};

最後に

npm run start

これで自動更新されるようになります！

さらに「JSビルドだけしたい、ブラウザは見なくていい」という時には「watch」機能を使うとさらに便利になります。

方法は２つ。

npx webpack --watch

を入力するか、自前コマンドとして、package.jsonに

"scripts": {
    "build": "webpack",
    "watch": "webpack --watch"
},

のように追記することで

npm run watch

これで「watch」機能が動き出します！

おわりに

「そろそろDjango単体じゃなくてReactとかNext.js使えるようにしたいな」と言いながら早2か月がたちました。

続く。