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

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

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

この記事の内容

フォルダを用意してVS codeを起動
ターミナルを起動
webpack環境の作成
必要なモジュールをインストール
webpack.config.jsファイルの作成・入力
起点ファイルの設定
index.htmlファイルを作成
package.jsonにエイリアス
ビルトする
index.htmlでmain.jsを読み込む
スタイルシートのローダーをインストール
webpack.config.jsの設定
index.jsの書き換え
ビルドする
スタイルシートの読み込みを削除
まとめ

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

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

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

ターミナルを起動

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

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

webpack環境の作成

npm init -y

1	npm init -y

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

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

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

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

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

npm i -D webpack webpack-cli

1	npm i -D webpack webpack-cli

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

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

npm i jquery

1	npm i jquery

npm i slick-carousel

1	npm i slick-carousel

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

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

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

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

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

const path = require('path');

module.exports = {
  mode: 'development',
  entry: `./src/index.js`,
  output: {
    path: __dirname + '/dist' ,
    filename: 'main.js'
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  ]
};

const path = require('path');

module.exports = {

mode: 'development',

entry: `./src/index.js`,

output: {

path: __dirname + '/dist' ,

filename: 'main.js'

plugins: [

new webpack.ProvidePlugin({

$: 'jquery',

jQuery: 'jquery'

})

]

};

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’ は、

`${__dirname}/dist`

1	`${__dirname}/dist`

とすることも可能。

filenameは、出力ファイル名。

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

起点ファイルの設定

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

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

import slick from 'slick-carousel';

$(function(){
  $('.slick').slick();
});

import slick from 'slick-carousel';

$(function(){

$('.slick').slick();

});

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

index.htmlファイルを作成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
    <title>Document</title>
</head>
<body>
    <ul class="slick">
        <li><img src="https://picsum.photos/seed/picsum/600/300" alt=""></li>
        <li><img src="https://picsum.photos/seed/picsum/600/300" alt=""></li>
        <li><img src="https://picsum.photos/seed/picsum/600/300" alt=""></li>
        <li><img src="https://picsum.photos/seed/picsum/600/300" alt=""></li>
        <li><img src="https://picsum.photos/seed/picsum/600/300" alt=""></li>
    </ul>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</ul>

</body>

</html>

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

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

package.jsonにエイリアス

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

{
  "name": "webpack-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
　　"build": "webpack --mode development",
     "prod": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "webpack": "^5.46.0",
    "webpack-cli": "^4.7.2"
  }
}

{

"name": "webpack-test",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

　　"build": "webpack --mode development",

"prod": "webpack --mode production"

"keywords": [],

"author": "",

"license": "ISC",

"dependencies": {

"webpack": "^5.46.0",

"webpack-cli": "^4.7.2"

}

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

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

ビルトする

npm run build

1	npm run build

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

npm webpack --mode development

1	npm webpack --mode development

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">

    <title>Document</title>
</head>
<body>
    <ul class="slick">
        <li><img src="https://picsum.photos/seed/picsum/600/300" alt=""></li>
        <li><img src="https://picsum.photos/seed/picsum/600/300" alt=""></li>
        <li><img src="https://picsum.photos/seed/picsum/600/300" alt=""></li>
        <li><img src="https://picsum.photos/seed/picsum/600/300" alt=""></li>
        <li><img src="https://picsum.photos/seed/picsum/600/300" alt=""></li>
    </ul>
    <script src="./dist/main.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</ul>

</body>

</html>

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

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

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

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

npm i -D css-loader style-loader

1	npm i -D css-loader style-loader

webpack.config.jsの設定

const webpack = require('webpack');

module.exports = {
    mode: 'development',
    entry: `./src/index.js`,
    output: {
      path: __dirname + '/dist' ,
      filename: 'main.js'
    },
    module: {
        rules: [
          {
            test: /\.css/,
            use: [
              'style-loader',
              {
                loader: 'css-loader',
                options: {
                  url: false
                }
              }
            ],
          }
        ]
      },
      
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery'
      })
    ]
  };

const webpack = require('webpack');

module.exports = {

mode: 'development',

entry: `./src/index.js`,

output: {

path: __dirname + '/dist' ,

filename: 'main.js'

module: {

rules: [

{

test: /\.css/,

use: [

'style-loader',

{

loader: 'css-loader',

options: {

url: false

}

]

plugins: [

new webpack.ProvidePlugin({

$: 'jquery',

jQuery: 'jquery'

})

]

};

webpackの設定も変えます。

index.jsの書き換え

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

import "slick-carousel/slick/slick.css";


import slick from 'slick-carousel';

$(function(){
  $('.slick').slick();
});

import "slick-carousel/slick/slick.css";

import slick from 'slick-carousel';

$(function(){

$('.slick').slick();

});

ビルドする

npm run build

1	npm run build

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- <link rel="stylesheet"  href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css"> -->

    <title>Document</title>
</head>
<body>
    <ul class="slick">
        <li><img src="https://picsum.photos/seed/picsum/600/300" alt=""></li>
        <li><img src="https://picsum.photos/seed/picsum/600/300" alt=""></li>
        <li><img src="https://picsum.photos/seed/picsum/600/300" alt=""></li>
        <li><img src="https://picsum.photos/seed/picsum/600/300" alt=""></li>
        <li><img src="https://picsum.photos/seed/picsum/600/300" alt=""></li>
    </ul>
    <script src="./dist/main.js"></script>
</body>
</html>