こんにちは。フリューのジョンです。

最近はプロジェクトで使用できたgulpやwebpackについて勉強しています。

その関連ではありますが、今回はMavenプロジェクトでwebpackを起動するということをやりたいと思います。

Mavenプロジェクトでwebpackを使えるようにする

webpackを使うためには、npmが必要です。そして、npmを使うためにはNode.jsをインストールする必要があります。
そのため、各自Node.jsをインストールして・・・となると、バージョン違いが発生したり・・・環境設定から・・・と、とても大変です。

そのために、frontend maven pluginをつかいます。https://github.com/eirslett/frontend-maven-plugin
このライブラリでは Node.jsのインストールや npm install、webpackの実行ができます。

pom.xmlにpluginを登録します。

これだけです。そして、

と叩くとNode.jsがインストールされます。

Node.jsやnpmのインストールはMavenのsetting.xmlを見てproxyを通してくれるのでとても助かります!

しかし、おそらく、プロジェクト直下にpackage.jsonが存在しないという以下のようなwarningが出てくると思います。

そのため、インストールされたNode.jsのnpmを利用してpackage.jsonを作成しましょう。
helper scriptが用意されておりますので、こちらのnpmファイルかnpm.batファイルをプロジェクト直下に配置します。

https://github.com/eirslett/frontend-maven-plugin/tree/master/frontend-maven-plugin/src/it/example%20project/helper-scripts

そして、プロジェクト直下にて以下コマンドを叩きます。

色々聞かれると思いますが、適当で良いです(Githubのレポジトリなどの情報のためです)。終わるとpackage.jsonが作成されています。

次にMavenからwebpackを利用するために、webpackをinstallします。

終わると、package.jsonに記述がされていると思います。

次にwebpackを使うための記述を記載します。

こちらはお使いのプロジェクトに合わせて適当に記述してください

以上で設定は終わりです。先ほどのコマンドをもう一度叩いてみてください。

index.jsなどきちんと用意されていればbundle.jsというファイルが作成されていると思います。

まとめ

Mavenからwebpackを利用するというのでお伝えしました。弊社ではwebpackの実施をprofileにしており、maven-war-pluginのlifecycleに上手く載せるようにしています。

webpackだけではなく、npm タスクや gulpも使用できるため、タスクを実行することもできます。

最後に

弊社ではVue.jsやwebpackなどフロント周りで楽しみたいエンジニアを募集してます!!

詳しくはこちら