Swiperをnpm経由で使い最後にwebpack

Swiperというレスポンシブ対応をしたスライダー(カルーセル)プラグインがある。

idangero.us

jQueryプラグインとしても使えるし、jQueryに依存せず独立して使うことができるわけだが、今回、npm経由でインストールを行い、最後に、webpackする方法について調査したので、それをまとめる。

まず、ターミナルで、npmコマンドをうってインストールをする。

npm install swiper

次に実行するjsでimportでswiperをインクルードさせる。

import Swiper from 'swiper';
new Swiper('#hoge', {

});

最後に、webpackで一つにまとめる。

npx webpack --config webpack.config.js