※以下チケットの続きです。
・【npmパッケージ】css-loaderのインストールから設定まで
https://ticketnote.dev/ticket/ABeOlX3lV2BA0GZ9IhVp

ここまででjsにcssを読み込ませはしたものの、まだ適用することができていない。
したがって本チケットで、適用させるstyle-loaderをインストール&設定する。

npm install --save-dev style-loader

まずはパッケージをインストールする。
package.jsonでインストールしているかを確認。

{
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "UNLICENSED",
  "private": true,
  "devDependencies": {
    "css-loader": "^3.4.2",
    "style-loader": "^1.1.3", // ← 追加されているのを確認
    "webpack": "^4.41.6",
    "webpack-cli": "^3.3.11"
  }
}

webpack.config.jsで設定する

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: 'main.js'
    },
    module: {
        rules: [
            {
                //test → ファイル名を検知する（cssファイルを検知する）
                test: /\.css/,
                //cssを検知した場合、以下ルールを適用する（css-loaderを使用せよ）
                use: [
                    //ここから追加
                    {
                        loader: 'style-loader'
                    },
                    //ここまで追加
                    {
                        loader: 'css-loader'
                    }
                ]
            }
        ]
    }
}

注意点として・・・

loaderは下から実行されていく。
つまり css-loader → style-loader　の順番で実行される。

npx webpack --mode developmentでwebpackを実行

webpackを起動して、画面を確認すると、ようやくCSSが反映されている。

【おまけ】styleタグで読み込まれる

devtoolで確認すると、linkタグでなく、styleタグで読み込まれている。