webpack 4って何？ ハンズオンを通してさらっと理解する

webpack 4ハンズオン

webpackって何？

webpackとは、複数のjsファイルをまとめるためのモジュールバンドラーです

モジュールバンドラーって何？

モジュールは部品です。 部品同士を1つにまとめ上げるためのものです。ドラえもんのメカ・メーカーみたいですね。

どうしてwebpackを使うの？

HTTP/1.1接続では、ウェブサーバーとブラウザの同時接続数が限られているため、多くのファイルを読み込むと時間がかかります。
そこでwebpackで複数のjsファイルを1つにまとめることで転送量を少なくします。
webpackは複数のjsをまとめる(ES modulesという仕組み)だけではなく、es2０１５を使ったモダンなjsの書き方を理解し、レガシーな記述へコンパイルしてくれたりもしてくれます。(アロー関数を、ちゃんとfunctionに直してくれたりです。）
さらにCSSや画像もjsファイルとしてまとめることができます！


webpackハンズオン

webpackの導入

最初に作業する場所を用意して下さい。

コマンド
cd /Users/MyName/myproject

続いてpackage.jsonを作りましょう

コマンド
cd myproject     // myprojectへ移動
npm init -y

package.jsonを作成


このようになりました。

続いてwebpackをインストールします。

コマンド
npm i -D webpack webpack-cli

* i は install の命令です。-Dはインストール先をdevDependenciesに指定するものです。

devDependenciesにwebpackが追加された


devDependenciesにwebpackが追加されたかと思います。

はい、これだけでwebpackを資料できる環境が整いました。


webpackを使ってみる

webpackを使って複数のjsをまとめてみましょう。

index.jsと、sub.js作成し、下のjsを書いて下さい。

index.js

// import 文を使って sub.js ファイルを読み込む。
import { hello } from "./sub";

// sub.jsに定義されたJavaScriptを実行する。
hello();

sub.js

export function hello() {
  alert("hello");
}

exportというのは、どこかで呼び出されて使われることを前提とするという決まり文句です。これがないとimportしても呼び出せません。*
export defaultって何？

それでは動かしましょう

コマンド
npx webpack

コンパイルに失敗しましたか？

この状態ではエラーとなると思います

webpackがエラーになってしまった

src ディレクトリを作成し、index.jsとsub.jsを移動して下さい。

webpackの起動が成功した

もう一度npx webpackして下さい、成功したかと思います！

distディレクトリが自動的に作られ、main.jsが誕生しました。そのjsの中にindex.jsの内容とsub.jsの内容が１つとなっています。

適当なhtmlファイルを作成し、読み込んでみましょう

sample.htmlにてmain.jsを読み込ませてみた

アラートが出れば成功です。

今回は小さなモジュールとしてsub.jsを用意しました。

こういった小さなモジュールを作成することで、管理やテストもしやすいのがwebpackの利点の1つです。


package.jsonをカスタマイズ

では続いて、package.jsonファイルをカスタマイズし、npm scriptsとして実行してみましょう。

package.jsonに下記を追加して下さい。

"scripts": {
    "build": "webpack"
  },
"private": true,

package.jsonをカスタマイズした

こんな感じです。

そしてこのコマンドを叩いてみましょう。

コマンド
npm run build

同じようにwebpackがビルドできましたか？


webpack.config.jsをカスタマイズ

次にwebpack.config.jsを用いて、webpackの動作をカスタマイズしてみましょう。

コマンド
touch webpack.config.js

まずは entryとoutputを設定します、この2つは必ず理解して下さい。

これはメインとなるJavaScriptファイルと出力先を意味します。

webpack.config.jsに書き加えましょう

module.exports = {
  // メインとなるJavaScriptファイル（エントリーポイント）
  entry: `./src/index.js`,

  // ファイルの出力設定
  output: {
    //  出力ファイルのディレクトリ名
    path: `${__dirname}/dist`,
    // 出力ファイル名
    filename: "main.js"
  }
};

この設定は、webpack.config.jsを用意しない、デフォルトの挙動を書き記したものです。
webpackを起動しても出力されるものには何も影響はありません。

それでは試しに、filenameをmain.jsから違うものに変更し、npm run buildコマンドを叩くとどうなるか確認しましょう。


コードの圧縮とソースマップ

開発中にjsファイルが圧縮された状態だと、元のソースファイルとの関連性がわかりにくい状態です。

そんな時は開発モードとして圧縮せずにバンドルしてみましょう。

webpack.config.jsに1行追加して下さい。

module.exports = {
  mode: "development" , // 追加した
  entry: `./src/index.js`,
  :
  :
};

この状態で npm run build すると、先ほどまで圧縮されていたmain.jsファイルが非圧縮の状態でコンパイルされたことが確認できるはずです。

圧縮、非圧縮状態でのjsの比較

違いは明らかですね。


Jsの書き換えによって自動的にwebpackを動作させよう

jsを変更して毎回 npm run build と入力するのはかなり面倒です。

ファイルの変更を検知(watch)して、webapckを自動的に動作させましょう。

まずは webpack-dev-server を手に入れます。

コマンド
npm i -D webpack-dev-server

package.jsonにwebpack-dev-serverが加わりました

package.jsonにwebpack-dev-serverが加わりました


続いて、webpack-dev-serverを動かすためのコマンドも\*\*package.jsonファイル\*\*に用意しましょう。 
{
  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server",
  :
  :

続いて、webpack.config.jsに下記を加えます。

module.exports = {
  mode: "development" , // 追加した
  entry: `./src/index.js`,
  :
  :
  //distディレクトリのindex.htmlを見るようになる
  devServer: {
    contentBase: "dist",
    open: true
  }
};

distディレクトrにindex.jsを入れてmain.jsを読み込んでください。

distディレクトリにindex.htmlを作った

そして npm run start にてwebpackを起動させます。

webpack-dev-serverが起動した

このようになり、http://localhost:8080/が自動的に立ち上がります。

それではsub.jsの中身にあるalertを変更してみて下さい。どうですか？変更を検知してブラウザが更新されましたか？

まとめ

いかがでしたでしょうか、今回はタイトルにもありますようにハンズオンを通してさらっと理解する事を目的としてこのエントリーを描きました。

開発の現場では、

  • jsの複数出力したい!
  • scssを使いたい
  • リリース用のファイルを作る時はソースマップ不要

といったような様々な要望があるかと思います。

これら全てできます！

また別の記事にてその辺りはご紹介します。


それでは今回は以上です。