LoginSignup
1

More than 3 years have passed since last update.

初めてのwebpack - ライブラリ編

Last updated at Posted at 2019-05-27

やっとこさwebpackを使うたる所以です。
例として、なんだかんだまだ離れられないjQueryのライブラリをwebpackでバンドルしてみます。

jQueryのインストール

なんだかんだ離れられない点も踏まえて、まだまだ汎用的なライブラリになるかと思いますので、npmでインストールする際もローカルではなく、グローバルにインストールしようと思います。

npm i jquery

これだけで使用できるようになりました。

jQueryの読み込み

読み込みには、requireimportのふた通りあります。

読み込み方法 備考
require node.jsの機能ですが、Babelもnode.jsで動作するため、その影響で使用できます。
import ECMAScript 2015にて採用されたJavaScriptの機能です。ただし、IEには採用されていないため、Babelにて変換が必要となります。(※下記の参考をご参照ください)

> 参考 : import - JavaScript | MDN

ここではimportを使用して作業を続けます。

index.js
import $ from 'jquery'

モジュールの読み込みは、下記で可能なのですが、

import 'モジュール名'

jqueryの場合は、通常$('body')などのように、$を使用していたかと思います。
単純に読み込んだだけでは、そのような使い方ができないため、読み込んだ内容を$として使用できるようにするため、前述のような内容になっています。

slick.jsを使ってみる

割とよく使うものとして、slick.jsがあるかと思います。(キービジュアルのスライドとか)
これも一緒にできると便利です。

インストール

とりあえず、モジュール名を探してみます。
githubにありました。

NPM
npm install slick-carousel

みたいですので、npm install slick-carouselを実行します。

読み込み

ここまででインストールできましたので、importすれば使えるようになります。

index.js
import $ from 'jquery'
import 'slick-carousel'

ただ、これだけだと動作しないですよね。
slick.cssslick-theme.cssの存在がネックです。

たださすがです。
node_modulesの中にバッチリありました。

 ls -1 node_modules/slick-carousel/slick/
ajax-loader.gif
config.rb
fonts
slick-theme.css
slick-theme.less
slick-theme.scss
slick.css
slick.js
slick.less
slick.min.js
slick.scss

jqueryslick-carouselのようなモジュールは、そのモジュール名だけでパスも解決してしまうのですが、cssとなるとそうもいきませんので、entryファイルからのパスをしっかり書いてあげます。

index.js
import $ from 'jquery'
import 'slick-carousel'
import '***entryファイルからのパス***/node_modules/slick-carousel/slick/slick.css'
import '***entryファイルからパス***/node_modules/slick-carousel/slick/slick-theme.css'

***entryファイルからのパス***の部分は、ご自身の環境にあわせて書き換えてください。すみません。

実行

このまま実行したいところですが、実行するとエラーが発生します。
まあ当然なのですが、JSファイルからCSSファイルを参照しようとしているので、webpack当人はよくわからない状況になってます。

これを解決するため(webpackでCSSを扱えるようにするため)に、CSS用のローダーをインストールします。

CSS用のローダーをインストール

css-loaderというローダーをインストールします。

前回までのwebpack.config.jsは、こういう状態なのですが、ここにルールを付け足していきます。

webpack.config.js
module.exports = {
  entry : './src/js/index.js',
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
}

rulesを増やしていきます。

webpack.config.js
module.exports = {
  entry: './src/js/index.js',
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.css$/,
        use: ['css-loader']
      }
    ]
  }
}

そして忘れてはいけないのが、読み込みのはCSSだけでなく、そのCSS内で、フォントやgif画像も含まれています。
次に、その解決をします。

それらをJSで扱うには一旦、文字データしないといけないので、それ用のモジュールをインストールします。

フォントや画像用のローダーをインストール

url-loaderというローダーをインストールします。

npm i -D url-loader

rulesを再度増やして設定します。

webpack.config.js
module.exports = {
  entry: './src/js/index.js',
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.css$/,
        use: ['css-loader']
      },
      {
        test: /\.png|jpg|svg|gif|eot|wof|woff|ttf$/,
        use: ['url-loader']
      }
    ]
  }
}

抜粋すると下記のエリアですが、|はどれかにマッチという意味合いのため、いずれかの拡張にマッチするファイルが条件になります。

webpack.config.js
{
  test: /\.png|jpg|svg|gif|eot|wof|woff|ttf$/,
  use: ['url-loader']
}

style要素書き出し用のローダーをインストール

このままだとCSSはただ読み込んだだけになるので、実際にHTMLファイルにstyle要素として書き出すようにします。

必要なローダーは、style-loaderです。
これをインストールします。

npm i -D style-loader

あとは、css-loaderの前に追記すれば、無事HTMLに出力されます。

webpack.config.js
module.exports = {
  entry: './src/js/index.js',
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      },
      {
        test: /\.png|jpg|svg|gif|eot|wof|woff|ttf$/,
        use: ['url-loader']
      }
    ]
  }
}

抜粋するとこの部分です。

webpack.config.js
{
  test: /\.css$/,
  use: ['style-loader', 'css-loader']
},

css-loaderの前に記載したのは、このローダーの部分は、後に書いたものから順番に実行するためです。
先にCSSを読み込んだ後でないとおかしくなるので、この順序となります。

これでwebpackを実行し、出力されたJSファイルを読み込んだHTMLファイルにはもれなく、style属性も追加されjqueryやslickも動作します。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1