webpack 超入門

2018.10.18 @otsukayuhi

index

  • webpackとは？
  • 今までの書き方と比較
  • まとめ

webpackとは？

webpackとは？

  • 複数のJavaScriptファイルを一つにまとめられる（ES Modules）
    • ​依存関係を解決してくれる（後ほど解説）
  • npm install したライブラリも使える

モジュール

エントリー

ポイント

webpack

export

import

JavaScriptのバンドルツール

  • モジュール：機能別のJSパーツ
  • エントリーポイント：webpackでビルドされるJSファイル

HTMLで読み込むJSファイル

ES Modulesとは？

ES2015から導入された、別のJavaScriptファイルを読み込む仕組み。
各スクリプトをモジュールと呼び、exportで出力して、importで読み込む。

<!-- ES Modules　を使うときは、type="module"属性を入れる -->
<script type="module" src="./main.js"></script>
// sayMessage関数をexportで出力
export function sayMessage(message){
  console.log(message);
};

sub.js

// sub.js をimportで読み込み、sayMessage関数を引っ張ってくる
import { sayMessage } from './sub.js';

// sub.js の sayMessage関数を実行
sayMessage('おはよう世界');
// コンソールに「おはよう世界」と表示される

main.js

読み込み

<!-- これでもOK -->
<script type="module">
    import { sayMessage } from './sub.js';
    sayMessage('おはよう世界');
</script>

main.js を読み込み

sub.js を読み込み

HTML

HTML

ES Modulesとは？

  • JavaScriptを機能毎に分割することにより、コードの可読性があがる
  • 機能を様々なページで使い回すことができる
  • モジュール単位でスコープされるため、グローバル汚染が防げる

type="module"属性が付く場合、モジュールレベルでスコープされるため、トップレベルの this が Windowオブジェクトではなくundefinedになり、グローバル汚染を防ぐことができる。また、そのスクリプトは、常にStrict モードとして動作する。

<script type="module">
    console.log(this); // -> undefined
</script>
<script>
    console.log(this); // -> window
</script>

type="module"

属性なし

ほりさげ！ 🤔

ES Modules 対応状況

webpackを使えば、IE11でもES Modulesを使うことができる！

ES Modulesとは？

  • JS以外もバンドルできる
  • ES2015+ → ES5
  • SCSS → CSS
  • 画像 → base64エンコード

モジュール

エントリー

ポイント

JS以外もOK

webpackとは？

+

HTMLで読み込むJSファイル

webpack + babel + sass

<link href="js/vendor/slick.min.css" rel="stylesheet">
<link href="js/vendor/slick.theme.min.css" rel="stylesheet">

<script src="js/vendor/jquery.min.js">
<script src="js/vendor/slick.min.js">
<script src="js/top.js">

今までの書き方

<script src="js/top.js">

webpack

webpackとは？

たとえば、jQueryとslick.jsを使うときは。。。

こんな感じ！😁

今までの使い方と比較

トップ・会社概要の2ページにスライダーを実装

トップページ

top.html

会社概要ページ

about.html

今までのやり方

今までのやり方

jQueryや、slickファイル一式をダウンロード

今までのやり方

それぞれのJavaScriptファイルを個別にトランスパイル

+

<link href="js/vendor/slick.min.css" rel="stylesheet">
<link href="js/vendor/slick.theme.min.css" rel="stylesheet">

<script src="js/vendor/jquery.min.js">
<script src="js/vendor/slick.min.js">
<script src="js/top.js">
<link href="js/vendor/slick.min.css" rel="stylesheet">
<link href="js/vendor/slick.theme.min.css" rel="stylesheet">

<script src="js/vendor/jquery.min.js">
<script src="js/vendor/slick.min.js">
<script src="js/about.js">

top.html

about.html

今までのやり方

今までのやり方

  • HTTP/1.1環境だとリクエスト数が増えてパフォーマンス低下
  • 同じような処理が、それぞれのJSで個別に書かれている
    • 処理が増えると、1ファイルの記述量が増えて、ごちゃごちゃしてくる
  • プラグイン・ライブラリを、いちいちWebサイトからダウンロードするのがめんどくさい

webpackのやり方

webpackのやり方

+

  1. ターミナルで、jQueryとslickをインストール
    $ yarn add jquery slick-carousel
  2. ES Modulesで、jQueryとslick一式をslider.jsにインポートし、slickの設定を書く
  3. ES Modulesで、slider.jsをtop.jsとabout.jsにインポート
  4. top.jsとabout.jsをwebpackでビルド
<script src="js/top.js">

top.html

webpackのやり方

<script src="js/about.js">

about.html

<link href="js/vendor/slick.min.css" rel="stylesheet">
<link href="js/vendor/slick.theme.min.css" rel="stylesheet">

<script src="js/vendor/jquery.min.js">
<script src="js/vendor/slick.min.js">
<script src="js/top.js">
<link href="js/vendor/slick.min.css" rel="stylesheet">
<link href="js/vendor/slick.theme.min.css" rel="stylesheet">

<script src="js/vendor/jquery.min.js">
<script src="js/vendor/slick.min.js">
<script src="js/about.js">

top.html

about.html

<script src="js/top.js">

top.html

webpackのやり方
<script src="js/about.js">

about.html

今までのやり方
共通部分は、キャッシュさせたほうがよくね？　🤔

でも、大丈夫！😁

webpackのやり方

+

共通部分を、別で書き出すことも可能。

共通部分

<!-- slick.js の cssが入っている -->
<link href="css/vendor.css" rel="stylesheet">

<!-- jQuery、slick.js が入っている -->
<script src="js/vendor.js">
<script src="js/top.js">
<!-- slick.js の cssが入っている -->
<link href="css/vendor.css" rel="stylesheet">

<!-- jQuery、slick.js が入っている -->
<script src="js/vendor.js">
<script src="js/about.js">

top.html

about.html

webpackのやり方

webpackのやり方

  • リクエスト数が減り、パフォーマンス向上
  • ES Modulesで機能ごとにJSを分割して、効率よく開発できる
    • JS間の処理を、共通化できる
    • 1ファイルの記述量が減って、コードがスッキリする
    • モジュールでスコープされるので、グローバル汚染なし
  • ライブラリ・プラグインの導入が手軽
  • 依存関係解決
<!--
以下の順番に読み込まないとエラーになる
jquery.min.js → slick.min.js → top.js
-->
<script src="js/vendor/jquery.min.js">
<script src="js/vendor/slick.min.js">
<script src="js/top.js">
<!-- 依存関係解決済み -->
<script src="js/top.js">

依存関係とは？

  • 特定のライブラリが無いと動かないプラグインとかの関係性を、
    依存関係があるという
    • 複数のライブラリ・プラグインを使用すると、依存関係が複雑になってくる
    • 複雑な依存関係は、作った人しかわからなくなり属人化してしまう

slick.jsはjQueryに依存している

（slick.jsを知らない人は、逆に書くかもしれない）

webpackで依存関係を解決

まとめ

まとめ

  • ES ModulesでJavaScriptを分割し、それらを1つにまとめることができる
    • ​JSを分割することにより、効率的に開発できる
    • グローバル汚染を防げる
    • リクエスト数が減り、パフォーマンスが向上する
    • 共通ファイルを分割することもできる
  • トランスパイルや画像のエンコードもできる
    • ES2015+ → ES5　SCSS → CSS
    • 画像をbase64にエンコード
  • ライブラリ・プラグインを手軽に導入できる
    • 依存関係の解決もしてくれる

Let's enjoy webpack !! 😁

webpack 超入門

By Otsuka Yuhi

Made with Slides.com

webpack 超入門

  • 614

More from Otsuka Yuhi