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

jQueryのインストール

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

npm i jquery

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

jQueryの読み込み

読み込みには、requireとimportのふた通りあります。

読み込み方法	備考
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.cssとslick-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

jqueryやslick-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も動作します。