BookmarkLINEwebpackを用いたフロントエンド開発環境構築webpackインストールwebpackセットアップWebアプリケーションのフロントエンドには、JSやCSSなどのたくさんの技術が集約されています。一口にJavaScriptと言っても、お馴染みのjQueryからReact.jsやAngular.js、Vue.jsなどのフレームワーク、はたまたES6(ES2015)と呼ばれるECMAScript、いわゆるJavaScript標準などなど、1つのアプリケーションで用いられる技術は多岐にわたります。Sheets/カスケーディング・スタイル・シート)も、現代ではそのまま記述するのではなく、SASS(SCSS)やLESSといったスタイルシート言語を用いて動的に記述していく方法も当たり前になりました。それらを惜しみなく活用した場合、記述したソースコードでは動作せず、コンパイルが必要になる事がほとんどです。ファイルを分割してソースを記述していく事も多い為、読み込ませる際の効率やリクエスト数も考えると、最終的にビルドしてファイルをまとめる必要(依存性も加味した上で)も出てきます。今回は、モジュールバンドラであるWebpackを導入し、レガシーからモダンまでをカバーできるフロントエンド開発環境を整えていきます。7を入れて行っています。npm周りで迷子になるケースがありがちなので、途中WinのVagrantについても掘り下げますが、基本的にはLinux環境で動作するように進めています。今回は、執筆時点で現行のWebpack4を導入し、JSとCSSの開発を開始する手前の設定までを行います。JSのフレームワークの導入までは今回は行いません。その手前までを構築して、あくまでも汎用的に。そこからは何を選択して導入しても良いようなラインまでの構築を行います。WebpackについてWebpackとは、Node.jsを用いてサーバーサイドで動作させるモジュールバンドラツールです。https://webpack.js.org/主要な特徴は以下の通り基本的なコンパイル、ビルドを行う複数ファイルを1つにバンドルするJSもCSSも一緒のファイルにバンドルする(もちろん別々も可)トランスコンパイラを用いてES6などの新しい仕様の記法やフレームワーク特有のソース(ReactのJSX等)を、動作させるコードへコンパイルするコードテストやユニットテストを行う厳密には、必要なモジュールを導入しそれらをWebpackで動作させる事でこういった処理が一気通貫で可能になります。Node.jsのインストールWebpackの導入にはNode.jsが必要なので、まずはNode.jsをインストールし、webpackの導入に必要なものを一式揃えます。今回は現時点で最新版であるv11.5.0をインストールします。Node.jsのバージョン情報はその都度公式で確認してください。https://nodejs.org/ja/Node.jsの導入確認まずは以下のコマンドを叩いてNode.jsのバージョンを確認すると共に、そもそもインストールされているかを確認します。found」と表示されたらNode.jsが入っていないのでインストールを行う必要があります。古いバージョンのNode.jsが入っていて新しいものに入れ直したい場合はアンインストールします。nodejsインストールまずはv11のリポジトリを追加します。以下のコマンドを叩きます。yarnリポジトリが切り替わり、任意のバージョンのNode.jsがyumでインストールされる事を確認します。nodesource変わらない場合は、一度キャッシュを削除してみると良いです。allキャッシュを削除したら、再度確認してみてください。それではNode.jsをインストールします。GCCコンパイラとmakeユーティリティも必要なので一緒にインストールします。makeインストールが完了したら、バージョンを確認します。一緒にnpmもインストールされるので、こちらも導入を確認しておきます。-v6.4.1インストールされた事が確認できました。package.jsonの作成Webpack導入の為に、package.jsonを作成します。プロジェクトルートへ移動し、以下のnpmコマンドを叩きます。-yプロジェクトルート直下にpackage.jsonが生成されます。package.json--------------------------------webpackのインストールそれではwebpackをインストールします。webpack4から、webpack-cliも一緒にインストールする必要があるので、これも一緒にインストールします。vulnerabilitiesWindows+VirtualBox(Vagrant)でnpmのインストールが失敗する場合の解決法もしVirtualBox(Vagrant)をwindowsで使用している場合は上記コマンドではインストールが失敗(ロールバックの嵐が発生)する場合があります。共有フォルダをマウントしていない場合この場合は以下2つの方法どちらかで解決します。オプション(=シンボリックリンクを回避する)を付けて実行します。後者で行う場合は、以下のようなコマンドになります。webpack-cliまた、その際に以下のWARNNINGが出る場合があります。{"os":"linux","arch":"x64"})fseventsがスキップされた旨を示していますが、fseventsはMac用のものなのでWindowsの場合はスルーしてしまって問題ありません。共有フォルダをマウントしている場合ホストOSとゲストOS間で共有フォルダをマウントしている場合で、共有フォルダ内にnode_modulesディレクトリがありそこへwebpackのインストール(に限らず、全てのnpmでのインストール)を行う場合は前者の方法でも失敗します。これは、デフォルトではVirtualBox内で共有フォルダにシンボリックリンクを貼る事が許可されていない事に加えて、そもそもWindowsとの仕様の違いがいくつかありNGとなっています。言っても回避は可能です。その方法をVagrantを例に解説します。仮想環境上のプロジェクトを一旦停止します。haltSymlinkを有効にする為にVagrantfileに以下を追記します。"VBoxInternal2/SharedFoldersEnableSymlinksCreate/SHARED_FOLDER_NAME","1"]endSymlinkとは、Windowsでシンボリック・リンクを貼るためのものです。設定配列の第三引数に共有フォルダ名を指定しますが、例えばsrcフォルダを共有フォルダとしていた場合、設定は以下のようになります。"VBoxInternal2/SharedFoldersEnableSymlinksCreate/src","1"]endここまで進めたら、cmdもしくはPowerShellを管理者権限で起動します。Windowsでは管理者権限でないとSymlinkが使えません。シンボリックリンクを貼る事ができないので、cmdやPowerShellを管理者権限で起動させる必要があります。Windowsの場合、セキュリティ上の理由からデフォルトではリモートサーバ上に向けてシンボリック・リンクを貼る事はできない(無効になっている)ので、以下のコマンドをcmd上で叩いてリモートサーバ上のシンボリックリンクを有効にします。R2L:1次に、以下のコマンドを叩いて状態の確認を行います。実行結果が以下のようになればリモートサーバ上のシンボリックリンクが有効になっています。