webpackをインストールしモダンなフロントエンド開発環境を整える

webpack を用いたフロントエンド開発環境構築 1. webpack インストール 2. webpack セットアップ

Web アプリケーションのフロントエンドには、JS や CSS などのたくさんの技術が集約されています。一口に JavaScript と言っても、お馴染みの jQuery から React.js や Angular.js, Vue.js などのフレームワーク、はたまた ES6（ES2015）と呼ばれる ECMAScript, いわゆる JavaScript 標準などなど、１つのアプリケーションで用いられる技術は多岐にわたります。また、見た目を司る CSS（Cascading Style Sheets/カスケーディング・スタイル・シート）も、現代ではそのまま記述するのではなく、SASS（SCSS）や LESS といったスタイルシート言語を用いて動的に記述していく方法も当たり前になりました。

そしてそれらを惜しみなく活用した場合、記述したソースコードでは動作せず、コンパイルが必要になる事がほとんどです。また、ファイルを分割してソースを記述していく事も多い為、読み込ませる際の効率やリクエスト数も考えると、最終的にビルドしてファイルをまとめる必要（依存性も加味した上で）も出てきます。

今回は、モジュールバンドラである Webpack を導入し、レガシーからモダンまでをカバーできるフロントエンド開発環境を整えていきます。

Contents

1. 検証環境
2. Webpack について
3. Node.js のインストール
   1. Node.js の導入確認
   2. インストール
4. package.json の作成
5. webpack のインストール
   1. Windows＋ VirtualBox（Vagrant）で npm のインストールが失敗する場合の解決法
6. Webpack コマンドを使えるようにする

検証環境

今回の検証環境ですが、Windows10 で VM に Linux CentOS 7 を入れて行っています。 npm 周りで迷子になるケースがありがちなので、途中 Win の Vagrant についても掘り下げますが、基本的には Linux 環境で動作するように進めています。

今回は、執筆時点で現行の Webpack4 を導入し、JS と CSS の開発を開始する手前の設定までを行います。

尚、JS のフレームワークの導入までは今回は行いません。その手前までを構築して、あくまでも汎用的に。そこからは何を選択して導入しても良いようなラインまでの構築を行います。

Webpack について

Webpack とは、Node.js を用いてサーバーサイドで動作させるモジュールバンドラツールです。
https://webpack.js.org/

主要な特徴は以下の通り

• 基本的なコンパイル、ビルドを行う
• 複数ファイルを１つにバンドルする
• 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 のバージョンを確認すると共に、そもそもインストールされているかを確認します。

# node.js 　導入確認
node -v

# 実行結果
[demo@localhost ~]$ node -v
-bash: node: command not found

「command not found 」と表示されたら Node.js が入っていないのでインストールを行う必要があります。

もし古いバージョンの Node.js が入っていて新しいものに入れ直したい場合はアンインストールします。

# Node.js 　アンイストール
yum remove nodejs

インストール

まずは v11 のリポジトリを追加します。以下のコマンドを叩きます。

# v11 リポジトリ追加
curl -sL https://rpm.nodesource.com/setup_11.x | bash -

# 実行結果
[demo@localhost ~]$ curl -sL https://rpm.nodesource.com/setup_11.x | bash -

## Installing the NodeSource Node.js 11.x repo...

## Inspecting system...

+ rpm -q --whatprovides redhat-release || rpm -q --whatprovides centos-release || rpm -q --whatprovides cloudlinux-release || rpm -q --whatprovides sl-release
+ uname -m

## Confirming "el7-x86_64" is supported...

+ curl -sLf -o /dev/null 'https://rpm.nodesource.com/pub_11.x/el/7/x86_64/nodesource-release-el7-1.noarch.rpm'

## Downloading release setup RPM...

+ mktemp
+ curl -sL -o '/tmp/tmp.Yd43V4SiQG' 'https://rpm.nodesource.com/pub_11.x/el/7/x86_64/nodesource-release-el7-1.noarch.rpm'

## Installing release setup RPM...

+ rpm -i --nosignature --force '/tmp/tmp.Yd43V4SiQG'

## Cleaning up...

+ rm -f '/tmp/tmp.Yd43V4SiQG'

## Checking for existing installations...

+ rpm -qa 'node|npm' | grep -v nodesource

## Run `sudo yum install -y nodejs` to install Node.js 11.x and npm.
## You may also need development tools to build native addons:
     sudo yum install gcc-c++ make
## To install the Yarn package manager, run:
     curl -sL https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo
     sudo yum install yarn

リポジトリが切り替わり、任意のバージョンの Node.js が yum でインストールされる事を確認します。

# yum でインストールされる nodejs のバージョンを確認する
yum list install nodejs

# 実行結果
Available Packages
nodejs.x86_64     2:11.5.0-1nodesource    nodesource

変わらない場合は、一度キャッシュを削除してみると良いです。

# キャッシュファイルの確認
du -sh /var/cache/yum

# 実行結果
[demo@localhost ~]$ du -sh /var/cache/yum
481M    /var/cache/yum

# キャッシュを削除
yum clean all

キャッシュを削除したら、再度確認してみてください。

それでは Node.js をインストールします。 GCC コンパイラと make ユーティリティも必要なので一緒にインストールします。

# Node.js と development tools インストール
yum install -y nodejs gcc-c++ make

インストールが完了したら、バージョンを確認します。また、一緒に npm もインストールされるので、こちらも導入を確認しておきます。

# Node.js バージョン確認
node -v

# npm バージョン確認
npm -v

# 実行結果
[demo@localhost ~]$ node -v
v11.5.0

[demo@localhost ~]$ npm -v
6.4.1

インストールされた事が確認できました。

package.json の作成

Webpack 導入の為に、package.json を作成します。

プロジェクトルートへ移動し、以下の npm コマンドを叩きます。

# package.json ファイルの生成
npm init -y

プロジェクトルート直下に package.json が生成されます。

--------------------------------
.
└─ package.json
--------------------------------

webpack のインストール

それでは webpack をインストールします。 webpack4 から、webpack-cli も一緒にインストールする必要があるので、これも一緒にインストールします。

# webpack webpack-cli インストール
npm i -D webpack webpack-cli

# 実行結果
[demo@localhost sample]$ npm i -D webpack webpack-cli

+ webpack-cli@3.1.2
+ webpack@4.28.1
added 379 packages from 288 contributors and audited 4263 packages in 60.65s
found 0 vulnerabilities

Windows＋ VirtualBox（Vagrant）で npm のインストールが失敗する場合の解決法

もし VirtualBox（Vagrant）を windows で使用している場合は上記コマンドではインストールが失敗（ロールバックの嵐が発生）する場合があります。

共有フォルダをマウントしていない場合

この場合は以下２つの方法どちらかで解決します。

• コマンドプロンプト（以下 cmd）もしくは PowerShell を管理者権限で起動させ仮想環境を立ち上げる
• webpack インストールする時に、--no-bin-links オプション（＝シンボリックリンクを回避する）を付けて実行します。

後者で行う場合は、以下のようなコマンドになります。

npm i -D --no-bin-links webpack webpack-cli

また、その際に以下の WARNNING が出る場合があります。

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

fsevents がスキップされた旨を示していますが、fsevents は Mac 用のものなので Windows の場合はスルーしてしまって問題ありません。

共有フォルダをマウントしている場合

ホスト OS とゲスト OS間で共有フォルダをマウントしている場合で、共有フォルダ内に node_modules ディレクトリがありそこへ webpack のインストール（に限らず、全ての npm でのインストール）を行う場合は前者の方法でも失敗します。

これは、デフォルトでは VirtualBox 内で共有フォルダにシンボリックリンクを貼る事が許可されていない事に加えて、そもそも Windows との仕様の違いがいくつかあり NG となっています。

と言っても回避は可能です。その方法を Vagrant を例に解説します。

まずは、仮想環境上のプロジェクトを一旦停止します。

vagrant halt

Symlink を有効にする為に Vagrantfile に以下を追記します。

config.vm.provider :virtualbox do |vb|
  vb.customize ["setextradata", :id, "VBoxInternal2/SharedFoldersEnableSymlinksCreate/SHARED_FOLDER_NAME","1"]
end

Symlink とは、Windows でシンボリック・リンクを貼るためのものです。

設定配列の第三引数に共有フォルダ名を指定しますが、例えば src フォルダを共有フォルダとしていた場合、設定は以下のようになります。

# 共有フォルダの指定が「src フォルダ」の場合
config.vm.synced_folder "./src", "/path/to/src"

# 上記の場合の設定
config.vm.provider :virtualbox do |vb|
  vb.customize ["setextradata", :id, "VBoxInternal2/SharedFoldersEnableSymlinksCreate/src","1"]
end

ここまで進めたら、cmd もしくは PowerShell を管理者権限で起動します。

Windows では管理者権限でないと Symlink が使えません。つまりシンボリックリンクを貼る事ができないので、cmd や PowerShell を管理者権限で起動させる必要があります。

Windows の場合、セキュリティ上の理由からデフォルトではリモートサーバ上に向けてシンボリック・リンクを貼る事はできない（無効になっている）ので、以下のコマンドを cmd 上で叩いてリモートサーバ上のシンボリックリンクを有効にします。

# リモートサーバ上のシンボリックリンクを有効にする
fsutil behavior set SymlinkEvaluation L2L:1 R2R:1 L2R:1 R2L:1

次に、以下のコマンドを叩いて状態の確認を行います。実行結果が以下のようになればリモートサーバ上のシンボリックリンクが有効になっています。

# 状態の確認
fsutil behavior query symlinkevaluation

# 実行結果
> fsutil behavior query symlinkevaluation

ローカルからローカルへのシンボリック リンクは有効です。
ローカルからリモートへのシンボリック リンクは有効です。
リモートからローカルへのシンボリック リンクは有効です。
リモートからリモートへのシンボリック リンクは有効です。

cmd 上での操作は以上です。それでは改めて仮想環境上のプロジェクトを立ち上げます。

vagrant up

立ち上げたら仮想環境へログインし、シンボリックリンクを貼っていきますが、ここで大事なのは、node_modules を共有フォルダの外に設定する。ということです。

例えばマウントした共有ディレクトリが /var/www/html/src だった場合は、共有扱いではない個所（src ディレクトリの外）に node_modules ディレクトリを１つ作成します。

# ディレクトリを作成
mkdir /var/www/html/nodes/src/node_modules

プロジェクトディレクトリへ移動し、シンボリックリンクを貼ります。

# プロジェクトディレクトリへ移動
cd /var/www/html/src

# シンボリックリンクを貼る
ln -s /var/www/html/nodes/src/node_modules node_modules

# 実行結果
[demo@localhost src]$ ll
node_modules -> /var/www/html/nodes/src/node_modules

これで完了です。 npm init -y して package.json を作成したら、webpack をインストール出来ます。

Webpack コマンドを使えるようにする

Webpack のインストールが完了したら、バージョン確認のコマンドを叩いて導入出来たかを確認します。

# webpack コマンドでバージョンを確認
node_modules/.bin/webpack -v

# 実行結果
[demo@localhost src]$ node_modules/.bin/webpack -v
4.28.1

ここで、上記のようなコマンドでは webpack コマンドを叩いている気がしないので、パスを通します。プロジェクトルートで以下のコマンドを叩きます。

# webpack コマンドのパスを通す
export PATH=$PATH:./node_modules/.bin

パスが通っているか確認します。

# パスが通ったか確認
find . -type l

# 実行結果
[demo@localhost src]$ find . -type l
./node_modules/.bin/acorn
./node_modules/.bin/atob
./node_modules/.bin/json5
./node_modules/.bin/miller-rabin
./node_modules/.bin/mkdirp
./node_modules/.bin/errno
./node_modules/.bin/semver
./node_modules/.bin/sha.js
./node_modules/.bin/terser
./node_modules/.bin/which
./node_modules/.bin/rimraf
./node_modules/.bin/import-local-fixture
./node_modules/.bin/webpack
./node_modules/.bin/webpack-cli

上記のように、パスが通っている事が確認できたら、改めてバージョンを確認します。

[demo@localhost src]$ webpack -v
4.28.1

Webpack の導入は大体終わりましたが、空っぽの状態で開始したプロジェクトルートは、この時点で以下のようになっています。

--------------------------------
.
├─ node_modules/
├─ package.json
└─ package-lock.json
--------------------------------

まとめ

作業は以上で完了です。 Webpack のインストールまでを行ったので、次回はここに必要なモジュールを追加し、設定を行って実際に Webpack を用いたコンパイル＆ビルドを行っていきます。