webpackでjQueryに依存したライブラリを含めてビルドする

概要

jQueryに依存したライブラリを含めつつ、webpackでよしなにbundleする必要があったのでやってみた。

試した環境は以下の通り。

• MacOSX 10.12.6
• Node.js v6.11.0
• webpack 3.8.1 (2017/10/27時点で最新)
• jquery 3.2.1
• jquery.cookie 1.4.1

webpackは「npm install --save-dev」で、jQuery系は「npm install --save」でインストールしておく。

configとかを簡単に書く。

webpack.config.js

const webpack = require('webpack');

const config = {
  entry: './src/index.js',
  output: {
    path: `${__dirname}/`,
    filename: 'bundle.js'   
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery'
    })
  ]
};

module.exports = config;

pluginsの箇所にProvidePluginの記述を追加。$にjQueryを入れてもらうように設定する。 bundle.jsの吐き出し先は好きに変えちゃってください。

index.js

// ProvidePluginで$に入れているので
// import $ from 'jquery'; の指定は不要
import 'jquery.cookie';

$(function(){
  // $にjquery.cookie.jsの処理が入っているか試す
  $.cookie("name", "myname", { expires: 7 });
});

これをwebpackでビルドし、htmlを適当に作って、bundle.jsを読み込めばcookieが書き込まれているのを確認出来ると思います。

参考にしたページ

https://webpack.js.org/plugins/provide-plugin/

公式のドキュメント読むのが一番手っ取り早かったです。