Blogフリュー株式会社の技術ブログです2017年10月18日MavenでNode.jsをインストールしてwebpackを起動しようHTMLJavaScript未分類こんにちは。フリューのジョンです。最近はプロジェクトで使用できたgulpやwebpackについて勉強しています。その関連ではありますが、今回はMavenプロジェクトでwebpackを起動するということをやりたいと思います。Mavenプロジェクトでwebpackを使えるようにするwebpackを使うためには、npmが必要です。npmを使うためにはNode.jsをインストールする必要があります。そのため、各自Node.jsをインストールして・・・となると、バージョン違いが発生したり・・・環境設定から・・・と、とても大変です。pluginをつかいます。install、webpackの実行ができます。pom.xmlにpluginを登録します。build</id><goals><goal>webpack</goal></goals></execution></executions></plugin></plugins>これだけです。generate-resoucesと叩くとNode.jsがインストールされます。Node.jsやnpmのインストールはMavenのsetting.xmlを見てproxyを通してくれるのでとても助かります!しかし、おそらく、プロジェクト直下にpackage.jsonが存在しないという以下のようなwarningが出てくると思います。field.そのため、インストールされたNode.jsのnpmを利用してpackage.jsonを作成しましょう。scriptが用意されておりますので、こちらのnpmファイルかnpm.batファイルをプロジェクト直下に配置します。https://github.com/eirslett/frontend-maven-plugin/tree/master/frontend-maven-plugin/src/it/example%20project/helper-scriptsそして、プロジェクト直下にて以下コマンドを叩きます。init色々聞かれると思いますが、適当で良いです(Githubのレポジトリなどの情報のためです)。終わるとpackage.jsonが作成されています。次にMavenからwebpackを利用するために、webpackをinstallします。webpack終わると、package.jsonに記述がされていると思います。次にwebpackを使うための記述を記載します。出力ファイル名}};こちらはお使いのプロジェクトに合わせて適当に記述してください以上で設定は終わりです。先ほどのコマンドをもう一度叩いてみてください。generate-resoucesindex.jsなどきちんと用意されていればbundle.jsというファイルが作成されていると思います。まとめMavenからwebpackを利用するというのでお伝えしました。弊社ではwebpackの実施をprofileにしており、maven-war-pluginのlifecycleに上手く載せるようにしています。gulpも使用できるため、タスクを実行することもできます。