expexp.jp

CSS , JavaScript

【webpack】スライドショー「Swiper」を使いたい

webpackの紹介は前回行なったので、今回から実践編に入ります。

実践編初回はウェブサイトにはよく使うスライドショーのJavaScriptプラグインを、webpackで扱う例を紹介します。サンプルで使うスライドショーのプラグインは、私の中でSlickと覇権を争ってるSwiperにしました。導入の仕方は公式にも軽く乗っていますが、ここでは補足する形で紹介していきます。

Swiperを入れる環境を構築する

webpackでSwiperを扱うための準備を行います。今回のサンプルのプロジェクト名（ディレクトリ）はwebpack-swiperにしました。

コマンドライン

mkdir webpack-swiper
cd webpack-swiper
npm init -y

JSON（package.json）

ここまでのpackage.json。

{
  "name": "webpack-swiper",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

これをこう！スッキリぃぃいっ！

{
  "name": "webpack-swiper",
  "scripts": {
    "build": "webpack",
    "watch": "webpack --watch"
  }
}

コマンドライン

コマンドラインに戻ってwebpackをインストールします。

npm i -D webpack webpack-cli

JSON（package.json）

ここまでのpackage.json。

{
  "name": "webpack-swiper",
  "scripts": {
    "build": "webpack",
    "watch": "webpack --watch"
  },
  "devDependencies": {
    "webpack": "^4.12.0",
    "webpack-cli": "^3.0.8"
  }
}

Swiperをインストールする

コマンドライン

いよいよSwiperをインストールします。バージョンの指定がある場合はここで指定しましょう。

npm i swiper

JSON（package.json）

ここまでのpackage.json。下位バージョンを指定していなければ最新版のSwiperがインストールされていると思います。

{
  "name": "webpack-swiper",
  "scripts": {
    "build": "webpack",
    "watch": "webpack --watch"
  },
  "devDependencies": {
    "webpack": "^4.12.0",
    "webpack-cli": "^3.0.8"
  },
  "dependencies": {
    "swiper": "^4.3.3"
  }
}

webpack.config.jsを準備する

webpackの挙動を制御するwebpack.config.jsを用意します。中身は次の通りです。バンドル前のmain.jsや出力先の設定を行います。

JavaScript（webpack.config.js）

module.exports = {
  mode: 'development',

  entry: `./src/js/main.js`,
  output: {
    path: `${__dirname}/htdocs`,
    filename: 'bundle.js'
  }
};

開発時のmodeは「development」で大丈夫ですが、本公開時などは「production」へ忘れず変更しましょう。

main.jsを準備する

バンドルするmain.js内にSwiperを呼び出す関数を記述します。変数名などは任意のものに変更してください。

JavaScript（src/js/main.js）

import Swiper from 'swiper';

var mySwiper = new Swiper( '.swiper-container' );

ここまでの内容をバンドルする

webpackの環境、Swiper、JavaScriptの準備ができたらここまので内容でバンドルしてみましょう。

コマンドライン

npm run build

これでwebpack.config.jsで指定した場所にSwiperがバンドルされたbundle.jsが生成されます。

スライドショー（Swiper）を動かすページ（HTML）を準備する

実装するhtmlファイルも用意します。まずは最小構成例を紹介します。

HTML（htdocs/index.html）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>webpack-swiper</title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.min.css">

</head>
<body>
  <div class="swiper-container">
      <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
      </div>
  </div>

  <script type="text/javascript" src="bundle.js"></script>
</body>
</html>

HTMLの用意ができたらページを開いてスライドショーが動くか確認しましょう。

Babelを使っている環境でSwiperを使う

Babelを使ってる方が増えているので、Swiperをその環境下でも使える例を紹介します。

Babelをインストールする

コマンドライン

npm i -D babel-core babel-loader babel-preset-env

JSON（package.json）

Babelをインストールした直後のpackage.json。

{
  "name": "webpack-swiper",
  "scripts": {
    "build": "webpack",
    "watch": "webpack --watch"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "webpack": "^4.12.0",
    "webpack-cli": "^3.0.8"
  },
  "dependencies": {
    "swiper": "^4.3.3"
  }
}

やりたいことが増えると長くなるpackage.json。仕方ありません。

JavaScript（webpack.config.js）

依存関係の処理としてwebpack.config.jsに公式に掲載されているコードを忘れずに追加します。

module.exports = {
  mode: 'development',

  entry: `./src/js/main.js`,
  output: {
    path: `${__dirname}/htdocs`,
    filename: 'bundle.js'
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                ['env', { 'modules': false }]
              ]
            }
          }
        ],
        exclude: /node_modules\/(?!(dom7|ssr-window|swiper)\/).*/,
      }
    ]
  }
};

CSSファイルも一緒にバンドルする

ここまでの設定では、bundle.jsとswiperのCSSが別れたままです。まとめるの大好き人間の私はさらにまとめます。

コマンドライン

npm i -D css-loader style-loader

JSON（package.json）

ここまでのpackage.json。

{
  "name": "webpack-swiper",
  "scripts": {
    "build": "webpack",
    "watch": "webpack --watch"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "css-loader": "^0.28.11",
    "style-loader": "^0.21.0",
    "webpack": "^4.12.0",
    "webpack-cli": "^3.0.8"
  },
  "dependencies": {
    "swiper": "^4.3.3"
  }
}

JavaScript（webpack.config.js）

module.exports = {
  mode: 'development',

  entry: `./src/js/main.js`,
  output: {
    path: `${__dirname}/htdocs`,
    filename: 'bundle.js'
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                ['env', { 'modules': false }]
              ]
            }
          }
        ],
        exclude: /node_modules\/(?!(dom7|ssr-window|swiper)\/).*/,
      },
      
      // CSS取り込み設定
      {
        test: /\.css/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              url: false
            }
          }
        ],
      }
    ]
  }
};

JavaScript（src/js/main.js）

main.js内にSwiperのCSSファイルをインポートする記述を行います。

import 'swiper/dist/css/swiper.css';

import Swiper from 'swiper';

var mySwiper = new Swiper( '.swiper-container' );

HTML（htdocs/index.html）

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>webpack-swiper</title>
</head>
<body>
  <div class="swiper-container">
      <div class="swiper-wrapper">
          <div class="swiper-slide">Slide 1</div>
          <div class="swiper-slide">Slide 2</div>
          <div class="swiper-slide">Slide 3</div>
      </div>
  </div>

  <script type="text/javascript" src="bundle.js"></script>
</body>
</html>

SwiperのCSSはbundle.jsに含まれるので、HTMLファイルからCSSの記述を削除します。スッキリ！

CSSではなくSASSファイルでバンドルする

CSSの設定をSASSに書き換えます。

コマンドライン

npm i -D node-sass sass-loader

JSON（package.json）

ここまでのpackage.json。

{
  "name": "webpack-swiper",
  "scripts": {
    "build": "webpack",
    "watch": "webpack --watch"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "css-loader": "^0.28.11",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.21.0",
    "webpack": "^4.12.0",
    "webpack-cli": "^3.0.8"
  },
  "dependencies": {
    "swiper": "^4.3.3"
  }
}

JavaScript（webpack.config.js）

module.exports = {
  mode: 'development',

  entry: `./src/js/main.js`,
  output: {
    path: `${__dirname}/htdocs`,
    filename: 'bundle.js'
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                ['env', { 'modules': false }]
              ]
            }
          }
        ],
        exclude: /node_modules\/(?!(dom7|ssr-window|swiper)\/).*/,
      },

      // SASS取り込み設定
      {
        test: /\.scss/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              url: false
            },
          },
          {
            loader: 'sass-loader',
            options: {
              sourceMap: true,
            }
          }
        ]
      }
    ]
  }
};

JavaScript（src/js/main.js）

main.js内のSwiperのCSSファイルインポートの記述は削除し、代わりにSASSファイルのインポートを記述します。

import '../scss/style.scss';

import Swiper from 'swiper';

var mySwiper = new Swiper( '.swiper-container' );

JavaScript（src/scss/style.scss）

style.scssファイルを作成し、その中でSwiperのインポートを記述します。

@charset "UTF-8";

@import "~swiper/dist/css/swiper.css";