webpack

2025年5月19日

はじめに

スマホファーストの現代、サクサク動くサイトを目指すべく色々調べていると何かとwebpackの話が出てきました。
もともとgulpは使っていて、それと組み合わせて使うこともできるようなのですが今回はシンプルにwebpackのみ導入する手順をめも。

ちなみにwebpack公式サイトとこちらの記事を参考にさせていただきました。後者の方は動画付きでとてもわかりやすい。何より日本語で常に最新版に対応した解説をしてくれているので安心ですね。
webpackについても詳しく書いてあるのでオススメです。

導入していく

まずはNode.jsをインストールこちらの公式サイトからインストールできます
次にコンテンツファイルを保存するフォルダーを任意の場所に作成し、コマンドラインでその場所まで移動。 (iTermを使って移動したいファイルをドラッグ＆ドロップするとサクッと移動できます)
そこで下記コマンドを実行。するとpackage.jsonファイルが生成されます。
```
npm init -y
```
さいごにwebpack本体をインストール。
コマンドラインで下記コマンドを実行。
```
npm i -D webpack webpack-cli
```

JSファイルをまとめる

やっとここまできました。webpackを使ってJSファイルをまとめていきます。例としてindex.jsでfadein.jsに定義されたshowElementAnimation()メソッドを呼び出すコードを記載します。

▼index.js

// import 文を使って fadein.js ファイルを読み込む。
import { showElementAnimation } from "./fadein";
// fadein.jsに定義されたJavaScriptを実行する。
showElementAnimation();

▼fadein.js

// export文を使ってshowElementAnimation関数を定義する。
  export function showElementAnimation() {
  var element = document.getElementsByClassName('fadein');
  if(!element) return; // 要素がなかったら処理をキャンセル
            
  var showTiming = window.innerHeight > 768 ? 500 : 400; // 要素が出てくるタイミングはここで調整
  var scrollY = window.pageYOffset; 
  var windowH = window.innerHeight;
        
  for(var i=0;i<element.length;i++) { 
      var elemClientRect = element[i].getBoundingClientRect(); 
      var elemY = scrollY + elemClientRect.top; 
      if(scrollY + windowH - showTiming > elemY) {
      element[i].classList.add('is-show');
    } else if(scrollY + windowH < elemY) {
      // 上にスクロールして再度非表示にする場合はこちらを記述
      element[i].classList.remove('is-show');
    }
  }
}
showElementAnimation();
window.addEventListener('scroll', showElementAnimation);

ふむふむ。
あとはIE11とかのブラウザでも使用できるようにするためにwebpackを使ってビルドしていきます。
コマンドラインに下記コマンドを入力。

npx webpack

するとdistフォルダーのなかにmain.jsが出力されます。
素敵ですね。そしてmain.jsをHTMLで読み込めばOKです。

jQueryに依存したモジュールをビルドする

webpack.config.jsファイルを用意し以下のコードを記述します。

▼webpack.config.js

const webpack = require('webpack');
  const config = {
  //  メインとなるJavaScriptファイル（エントリーポイント、ここを指定しなければ自動的に「src/index.js」に出力される）
  entry: './src/index.js',
  // ファイルの出力設定（ここを指定しなければ自動的に「dist/main.js」に出力される）
    output: {
    //  出力ファイルのディレクトリ名
    path: `${__dirname}/js`,
    // 出力ファイル名
    filename: 'main.js'
    },
    plugins: [
      new webpack.ProvidePlugin({
      jquery: 'jquery',
      $: 'jquery'
      })
    ]
  };
      
  module.exports = config;

pluginsにwebpack.ProvidePluginの記述を追加。ここでjQuery依存のモジュールもバンドルできるようにします。今回はjQueryを使ったnavbutton.jsファイルを呼び出します。

▼index.js

import './navbutton';

▼navbutton.js

jQuery(function() {
  jQuery('.btn-trigger').click(function() {
    jQuery("#header-nav-wrap").slideToggle();
  });
});

あとは先ほど同様にwebpackでビルドしmain.jsをHTMLで読み込めば思い通りの動きをしてくれます。

さいごに

意外と簡単に導入することができました。gulpとセットで使って行こうかと。
そしてwebpackにはとても可能性を感じました。カスタマイズすることで更に便利になるようです。
冒頭でも紹介しましたが、コチラに詳しく書いてありますのでどうぞ。

参考ページ

https://ics.media/entry/12140/
https://webpack.js.org/plugins/provide-plugin/
https://rukiadia.hatenablog.jp/entry/2017/10/27/155243