webpackでJavaScriptライブラリを利用する

webpackで様々なJavaScriptライブラリをコマンドラインからインストールして利用する事が可能になります。

webpackのインストールと利用方法

まずプロジェクトフォルダで以下のコマンドでpackage.jsonを作成します。

npm init -y

次にwebpackを以下のコマンドでインストールします。

npm install --save-dev webpack

webpackをインストールしたならpackage.jsonと同一階層にwebpack.config.jsという設定ファイルを作成します。

設定内容はひとまず以下のようにしておきます。これは./src/script.jsの内容をコンパイルして./dist/script.jsに出力するという命令です。

module.exports = {
  entry: __dirname + "/scr/script.js",
  output: {
    path: __dirname + '/dist',
    filename: 'script.js'
  }
};

最後にpackage.jsonのscriptsの内容を以下のように変更しておきます。(-dはDevelopオプションで指定しておくとSourceMapなどが出力されてちょっとだけデバッグが楽になります。)

  "scripts": {
    "build": "webpack -d"
  },

これで「npm run build」コマンドで./src/script.jsの内容をコンパイルして./dist/script.jsに出力されるようになります。

ではscr/script.jsファイルに以下のような内容を記述して「npm run build」コマンドを叩いてみましょう。

console.log('ok');

./dist/script.jsが生成されて以下のような内容になっているかと思います。

/******/ (function(modules) { // webpackBootstrap
/******/ 	// The module cache
/******/ 	var installedModules = {};
/******/
/******/ 	// The require function
/******/ 	function __webpack_require__(moduleId) {
/******/
/******/ 		// Check if module is in cache
/******/ 		if(installedModules[moduleId])
/******/ 			return installedModules[moduleId].exports;
/******/
/******/ 		// Create a new module (and put it into the cache)
/******/ 		var module = installedModules[moduleId] = {
/******/ 			exports: {},
/******/ 			id: moduleId,
/******/ 			loaded: false
/******/ 		};
/******/
/******/ 		// Execute the module function
/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ 		// Flag the module as loaded
/******/ 		module.loaded = true;
/******/
/******/ 		// Return the exports of the module
/******/ 		return module.exports;
/******/ 	}
/******/
/******/
/******/ 	// expose the modules object (__webpack_modules__)
/******/ 	__webpack_require__.m = modules;
/******/
/******/ 	// expose the module cache
/******/ 	__webpack_require__.c = installedModules;
/******/
/******/ 	// __webpack_public_path__
/******/ 	__webpack_require__.p = "";
/******/
/******/ 	// Load entry module and return exports
/******/ 	return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/*!***********************!*\
  !*** ./src/script.js ***!
  \***********************/
/***/ function(module, exports) {
　
	console.log('ok');
　
/***/ }
/******/ ]);
//# sourceMappingURL=script.js.map

このようにしてwebpackは利用します。

jQueryの利用方法

では、まずよく利用されるJavaScriptライブラリとしてjQueryを利用してみましょう。

以下のコマンドでjQueryのインストールを行います。

npm install --save jquery

src/script.jsを以下のように変更してビルドして見ましょう。

var $ = require('jquery');
$('body').css('background','red');

以下のようなhtmlを用意してdist/script.jsを読み込んで確認してみると画面が赤くなるのが確認できるかと思います。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<script src="dist/script.js"></script>
</body>
</html>

このようにJavaScriptライブラリをnpmでinstallしておけば必要な際にrequireで呼び出して使えることができます。

CSSや画像が必要なJavaScriptライブラリの場合

次にCSSファイルや画像が必要なJavaScriptライブラリの利用法です。

まず、webpackでCSSや画像などのファイルを取り扱うための拡張機能である css-loaderとstyle-loader、url-loaderのインストールを行います。

npm install --save-dev  css-loader style-loader url-loader

次にwebpack.config.jsにurl-loaderで利用する拡張子を設定しておきます。

module.exports = {
  entry: __dirname + "/src/script.js",
  output: {
    path: __dirname + '/dist',
    filename: 'script.js'
  },
  module:{
    loaders: [
      { test: /\.(gif|png|jpg|eot|wof|woff|ttf|svg)$/, loader: 'url-loader' }
    ]
  }
};

それでは、webpackを利用してslickというJavaScriptライブラリを利用してみましょう。

npm install --save slick-carousel

webpackでJavaScriptライブラリを利用する際には、JSファイルはjQueryと同じようにrequire('パッケージ名');で読み込み、CSSファイルはrequire('!style!css!パッケージ名+node_modules内のパッケージからのCSSファイルまでのパス');で読み込みます。

slickを利用する場合はsrc/script.jsには以下のように設定してビルドを行います。

var $ = require('jquery');
require('slick-carousel');//JSファイルの読み込み
require('!style!css!slick-carousel/slick/slick.css');//CSSファイルの読み込み
require('!style!css!slick-carousel/slick/slick-theme.css');//CSSファイルの読み込み
$('.your-class').slick();

index.htmlに以下のようなHTMLを記述しておけばslickが動作します。

<div class="your-class">
	<div>your content</div>
	<div>your content</div>
	<div>your content</div>
</div>

webpackは非常に高機能ですがクセが強いので、程々に利用するのが良いかと思います。

【PR】
そんなwebpackとBableを利用してES2015を学ぶハンズオントレーニングを2017年1月25日(水)に行います。興味がある方はチェックしてみてください。
トゥーアール・アカデミー　webpackとBabelで学ぶES2015(ES6)入門

スポンサードリンク

2016年11月25日 13:43
カテゴリー JavaScript

«webpackとBabelで学ぶES2015入門 | メイン | Web制作の現場で使う jQueryデザイン入門 [改訂新版] 10刷決定»

webpackでJavaScriptライブラリを利用する

webpackのインストールと利用方法

jQueryの利用方法

CSSや画像が必要なJavaScriptライブラリの場合

関連エントリー

スポンサードリンク