【webpack】jQueryやslickスライダーをバンドルする方法

 
 

この記事では、webpackを使って、jQueryやslickスライダープラグインをバンドルする方法についてまとめてあります。

webpackの使い方がわからない人に役立つと思うので、参考にしてください。

スポンサーリンク

フォルダを用意してVS codeを起動

まず適当なフォルダを用意します。

フォルダ名は、『webpack』にするとあとの処理で、エラーがでるので注意しましょう。

ターミナルを起動

エディタを起動させて、ターミナルを起動させます。

VS Codeは、メニューバーの『表示』の『ターミナル』で起動できます。(ショートカットはctrl+@)

webpack環境の作成

ターミナルに上記のコードを入力。

『-y』はすべてYesを意味します。これをなしにすると、一つ一つ、細かな設定ができるようになります。

この設定の内容は、webpackの環境を作った後に作成されるpackage.jsonファイルを見るとわかります。

このファイルの『name』が『webpack』となっていることが、フォルダ名をwebpackにできない原因。

必要なモジュールをインストール

Dは開発モードを意味します。また、cliはコマンドラインでwebpackを使うためのものです。

さらに今回利用するjQueryやslickもインストールしましょう。

ちなみに、モジュールが何かわからない人は、しまぶーさんの説明を聞いてみてください。かなりわかりやすく解説されています。

【モダンJavaScript #7】モジュールの基礎を理解しよう!名前空間(スコープ)の問題とはおさらば!【フロントエンドエンジニア講座】

webpack.config.jsファイルの作成・入力

webpack.config.jsは、webpackの設定するところです。package.jsonと同じ階層に、webpack.config.jsファイルを作成しましょう。

そして、ファイルには以下のように入力。

const path = require(‘path’);

上記のパスは、/で区切られていますが、環境によっては、\とかになっているものもあります。そのつど書き換えるのは大変なので、require(‘path’);を読み込んでいます。

読み込んだら、entry:path.join(__dirname,”src”,”index.js”)と書くこともできます。またoutputの方にも同じように書いてOK。『__dirname』はNode.jsで用意されているグローバル変数。絶対パスを取得できる。

entryには、読み込みが開始されるファイル名を書きます。初期値は、src/index.js。entryは作業ディレクトリ(カレントディレクトリ)からの相対パスで書きましょう。

outputは出力されるファイルを設定する場所です。pathにはどのディレクトリに出力するかを絶対パスで書きます。上のコードは初期値なので、なくてもOK。

path: __dirname + ‘/dist’ は、

とすることも可能。

filenameは、出力ファイル名。

plugin:の記述は、公式ページからの引用です。

起点ファイルの設定

起点となるファイルindex.jsをsrcフォルダの中に作りましょう。

そして、このファイルに必要なjsファイルを読み込みます。

import slickのslickは変数の設定。使わないなら、slickなくてもOK。

index.htmlファイルを作成

今回使うslickスライダーを表示させるためのコードを書きます。

slickプラグインのcssの読み込みも忘れないようにしましょう。

package.jsonにエイリアス

scriptのところに別名を記入できるので使ってみます。

npm run build、npm run prodという感じに使える。

buildやprodのあたりにスペースがあったりすると、ビルトの時、エラーが表示されるのできれいにしておくといいです。

ビルトする

モードオプションをつけて、developmentとしないと、production(本番)モードでビルトされます。webpack.config.jsでmodeを設定するか、

これでdevelopmentでビルトされる。開発モードでビルトすると、コードが読みやすい状態になっていて、本番モードだと、改行スペースなく1行になっていて読みづらいです。

ビルトされたファイルは、distフォルダの、main.jsとなっています。

index.htmlでmain.jsを読み込む

ビルトされたmain.jsを読み込みます。これで基本的な作業は終了です。

スタイルシートのローダーをインストール

上記の方法はまだ、slickのCSSファイルまではバンドルされていません。

CSSファイルもバンドルするなら、下記のようにやっていきます。

webpack.config.jsの設定

webpackの設定も変えます。

index.jsの書き換え

起点ファイルであるindex.jsでcssを読み込む処理が必要。

ビルドする

スタイルシートの読み込みを削除

これで、1つのファイルの読み込みだけでslickスライダーが実装できました。

まとめ

今回の記事では、『webpackの設定ファイルを編集してみよう』や『【webpack】スライドショー「slick」を使いたい』を参考にしてあります。

僕なんかより、かなりわかりやすくまとめてあるので参考にしてみてください。

スポンサーリンク

おすすめ記事

フォローする