link facebook2 twitter youtube

【webpack 3】webpack 3をインストールしよう!

タスクランナーは何を使っていますか?
僕はgulpです!
前職の優秀な同僚が用意してくれたgulp環境をそのまま使わせてもらっています。ありがとうございます!

いつかは自分で環境構築できないといけないなと思いながら忙しさにかまけて着手できずにいましたが、いよいよ勉強してみようと思い立ちました。
以下の手順で自分なりの開発環境構築を模索します。

目標

  • この先1年は恥ずかしくないようにモダンに作る

  • 前提

    • 出来るだけ使うツールは最少にする
    • ビルドなどにストレスが少ないものを選ぶ
    • 他の人と共有した際に、使いやすいように作る
  • 手順
    1 まずwebpack単体で実装
    2 npm-scriptsと組み合わせる
    3 必要ならgulpで構築

webpackとは

webpackとはモジュールバンドラです。
わちゃわちゃしがちなjavascriptファイル(モジュール)などをひとまとめにできるサービスです。
実際の制作現場などでは、複数のJSファイルを読み込ませたり、反対にひとつのJSファイルにたくさんの記述をしてしまうことがあると思います。
たくさんのファイルを読み込ます場合は、ロードの遅延の原因になりますし、ひとつのファイルに記述する場合はメンテナンス性が悪くなることやそのページに不要なスクリプトも読み込むことで無駄が生じます。
AMPに代表されるように、ページ表示速度を改善することがUXの向上の大きな要因になっている昨今、これらの無駄はゆゆしき問題です。

webpackはそんな開発者の悩みを解消してくれるツールとしてとても重宝します。
JSファイルをモジュールという小さな単位で管理でき、それらを統合する(バンドル)ことでページロード時のオーバーヘッドを解消できます。

とりあえずGUIDESやって概要つかむ

https://webpack.js.org/guides/

インストール

まずはインストールです。
Node.jsをインストールして、npmが使える状態にした後、
webpackをインストールしてください。

npm install --save-dev webpack
  • webpackは、パッケージのインストールをローカル環境(プロジェクト単位)に行うことを推奨しています。
    パッケージのメジャーアップデートなど大きな変更があったときにも容易にアップグレードできるからです。
  • 通常webpackは、npm-scriptsと合わせて使います。
  • ローカル環境にインストールしたwebpackは以下のコマンドで実行できます。
node_modules/.bin/webpack.

もちろん、グローバルにパッケージをインストールすることもできますが、推奨されていません。
特定のバージョンからwebpackを実行することによりプロジェクトによってはバージョンの相違でコンパイルが通らない原因になるからです。

ベータ版もインストールできます。
(ベータ版を利用する場合は、リリースを購読して変更を把握しておきましょう。あたりまえのことですが、バグも内包されていることもあるので、本番環境用に展開しないようにしましょう)

npm install webpack@beta

webpackのインストールが完了しました!
次はwebapckを使ってJavascriptファイルをコンパイルしてみましょう!

© eggplant