webpack(バージョン3)でjQueryを使う方法

npmでjQueryをインストールするところから、webpackを使ってjQueryを使ったJavaScriptをビルドするところまでを解説していきます。

今回の検証で使ったwebpackのバージョンは、3.5.5です。

[スポンサーリンク]

今回やること

webpackのエントリポイントのjs内でjQueryが使えるように設定していきます。

前提条件

npmとwebpackはすでに入っているものとします。(バージョンは3以上がオススメ。)

そして、npm initで作業用プロジェクトはあらかじめ作っておきます。

npmもwebpackもまったくはじめてという方は、webpack(Ver3)の公式チュートリアルをやって基本を理解するを参考にどうぞ。

jQueryをnpmでインストール

まず、webpackでjQueryを扱うためjQuery自体をインストールしていきます。

こちらのコマンドを実行してインストールして下さい。

npm install --save jquery

実行後、package.jsonにハイライト部分が追加されていればOKです。

{
  "scripts": {
    "build": "webpack"
  },
  "dependencies": {
    "jquery": "^3.2.1"
  },
  "devDependencies": {
    "webpack": "^3.5.5"
  }
}

こちらは今回のことにあまり関係はありませんが、npmでwebpackのビルドができるように2〜4行目を追加しています。これはお好みでどうぞ。

また、devDependenciesの部分はwebpackをグローバルでインストールしていれば不要です。

もしもまだwebpackをインストールしていないようでしたら、こちらのコマンドを実行すると上記設定ファイルのようにdevDependenciesが追加されます。

npm install --save-dev webpack

webpack.config.jsを作成する

jQueryを使うにあたって、webpack.config.jsに何か設定を追加するということは不要です。

一応参考までに今回使用したwebpack.config.jsを載せておきます。
こちらは、エントリポイントjsを./src/index.jsで指定して、ビルドファイルをbundle.jsに指定するというシンプルな設定です。

var path = require('path');
 
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

上記webpack.config.jsを使用するためのフォルダ構成はこちらの通りです。
ハイライトのファイルにjQueryのコードを書いていくイメージです。

  webpack-jquery
  |- package.json
  |- webpack.config.js
  |- /dist
    |- index.html
  |- /src
    |- index.js

これでjQueryを使うための設定が完了しました。

あとはエントリポイントjsへjQueryを使ったロジックを書いていきましょう!

jsファイルへjQueryの記述をする

index.jsにこのようにjQueryのコードを書いていきます。
1行目は必ず必要です。
これでjQueryを使ったコードを書いていくことができます。

あとはいつも通りにjQueryを使ったコードを書いていけば動きます。
特に変わった書き方をする必要もありません。

var $ = require('jquery');

$(function() {
  $('#btn').click(function(e) {
    $('body').css('background','#BCE1CF');
  });
});

index.html

一応htmlファイルも載せておきます。
ボタンをクリックすると先程のjsロジックが動く仕組みです。

<html>
 <head>
   <title>Getting Started</title>
 </head>
 <body>
  <button id="btn">色変更</button>
  <script src="bundle.js"></script>
 </body>
</html>

ビルド

一応念のためビルド方法も載せておきます。

ビルド方法はこのコマンドを実行するのでもいいですし、

webpack

package.jsonにbuildを設定したのであればこちらでもOKです。

npm run build

ビルド後にindex.htmlを開いてボタンをクリックしてみて下さい。

jQueryで書いたロジックが動けばOKです。

さいごに

最近ではReact.jsの登場によってjQuery不要説もでていますが、jQueryはここ10年くらいは開発現場では必要不可欠なライブラリでした。

減少傾向にあってもすぐに廃れるということも考えにくいです。

webpackでもjQueryは簡単に使うことができるので、ぜひ使ってみて下さい!

それでは!