css-loaderとは？

エントリーポイントのjsにcssを読み込ませるために必要なnpmパッケージ。
（作成したcssをJavaScriptのモジュールとして読み込ませる）
（これがないとエントリーポイントのjsからcssを読み込めない）

①npm install --save-dev css-loader

コマンドにて、npmパッケージを追加。
追加されているかpackage.jsonで確認する。

②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: 'css-loader'
                    }
                ]
            }
        ]
    }
    //ここまで追加
}

③エントリーポイントのJSにcssを読み込む記述を追加

import my from './modules/my.js'
//ここから追加
import './modules/my.css'
//ここまで追加

console.log('webpack')
my();

④modules/にmy.cssを追加

body {
    color: lightblue;
}

※ただし、これだけではまだCSSは適用されない。

JavaScriptで読み込んだだけで、使用していない。

以下に続く。