1. この記事の目的
- Chrome拡張機能を使用した際にWebpackを使わなければならなかった理由の説明
- WebpackでJSファイルをバンドルするために行った手順
2. なぜ、Webpackが必要だったか
結論から言いますとChromeの拡張機能のコードの中では、JavaScriptのimportが使えなかったからです。
実際に私はいくつかのJavaScriptファイルを用意してmain.jsから他のファイルをモジュールとして読み込むような構成でツールを作っていました。
// main.js
import { startTracking } from "./time_script.js";
import { TRACKED_URLS } from "./config.js";
const currentURL = location.href;
const matched = TRACKED_URLS.some((targetURL) =>
currentURL.startsWith(targetURL)
);
if (matched) {
startTracking();
} else {
console.log("メッセージ");
}
});
import { startTracking } from "./time_script.js";
import { TRACKED_URLS } from "./config.js";
私はChromeの拡張機能でimportが使えないなんてことは全然想定していなかったので、そのままパッケージを拡張機能としてChromeにアップロードしたところ、以下のようなエラーメッセージが表示されました、、
Uncaught SyntaxError: Cannot use import statement outside a module
要するに、import文は使えないということでした。
なので、拡張機能として正しく動作させるにはJavaScriptのファイルを1つにまとめ、その中にすべての処理を記述する必要がありました。
そこで使用したのがWebpackです。
3. Webpackとは何か？
Webpackとは簡単にいうと複数のJavaScriptファイルを1つにまとめてくれるツール。
JavaScriptだけでなくて、画像やCSSなどもバンドルすることができる。
(バンドル = ひとまとめにする)
本来であれば、Webpackを利用してファイルをまとめる最大の利点はWebページのパフォーマンスを向上させること。
例えば、3つのJavaScriptファイルを1つのJavaScriptファイルにバンドルすると、Webページを読み込む際にブラウザは1つのJavaScriptファイルを読み込めば良いことになるので、読み込むファイルの数が2つ減り、それによりWebサイトの表示が早くなる。
ただ、今回私が利用した最大の目的はWebページのパフォーマンスではなくて、JavaScriptのファイルを1つにまとめられるという点
1つ前の章でお伝えしたように、Chrome拡張機能ではimport文が使えないので、複数のJavaScriptファイルを連携させることができない。
そこで複数のJavaScriptファイルをWebpackにまとめてもらい、それを拡張機能として読み込むことで無事に動作させることができた。
4. Webpackでバンドルするために行った手順
1. ターミナルで拡張機能のディレクトリへ移動し以下のコマンドを入力
npm install --save-dev webpack webpack-cli
このコマンドでWebpackを導入する
WebpackはNode.js上で動作するので、前提としてNode.jsがインストールされている必要があります！
2. 拡張機能のディレクトリ内に webpack.config.js を作成
// webpack.config.js
module.exports = {
entry: "./src/main.js",
output: {
filename: "main.bundle.js",
path: path.resolve(__dirname, "dist")
},
mode: "production"
};
WebpackがJavaScriptファイルをバンドルする際に参照する設定ファイル。
大切な設定事項
- entry : 起点となるJavaScriptファイルを記述
- filename : バンドルされたJavaScriptファイルが出力される際のファイル名
3. ターミナルで以下のコマンドを入力
npx webpack
このコマンドによりWebpackによるバンドルが実行されてひとまとめになった状態のJavaScriptファイルが出力される