こんにちはhiro08です。お仕事でReact を使ってChrome Extensionを開発する機会がありました。初めはcreate-react-appをベースにしたプロジェクト構成で開発してましたが、Content ScriptsやBackground Scriptsを追加する時にwebpackのエントリーポイントを増やす必要がありました。 create-react-appでエントリーポイントを増やすにはeject(create-react-appの裏側で走っているwebpackなどを展開するコマンド)を実行する必要があります。しかしこれは構成が複雑化して、今後メンテナンスするときの負債になりそうでした。なので、一からwebpackのビルド設定して、要件によって柔軟に対応できるようにしました。この記事はその時の知見です。 テンプレートはGitHub上に置いてあります。 github.c
![ReactでChrome Extensionを開発するために必要なwebpackのビルド設定 - hiro08gh](https://cdn-ak-scissors.b.st-hatena.com/image/square/06a15c64ba0ceec233d86d71001ebb29a9dcbf5d/height=288;version=1;width=512/https%3A%2F%2Fcdn.blog.st-hatena.com%2Fimages%2Ftheme%2Fog-image-1500.png)