css not loaded on webpack

Question

I just learned webpack and i got problem when run npm run start-dev my css not loaded. how to fix it?

this code on webpack.config.js:

const path = require("path");
 
module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.js"
    },
    mode: "production",
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: "style-loader"
                    },
                    {
                        loader: "css-loader"
                    }
                ]
            }
        ]
    }
}

this code on index.js

import "./style/style.css";
import $ from 'jQuery'
import 'bootstrap';

console.log("berhasil tehubung");

Answer 1

You probably need the file-loader webpack plugin too, I used this config for it in one of my webpack config files:

{
  loader: "file-loader",
  options: {
    name: "[name].css",
    outputPath: "css/",
  },
 }