i’m trying to configure css modules in my react app, but I cannot figure out why it isn’t working.
enter image description hereenter image description here
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
module.exports = {
entry: "./index.js",
mode: "development",
output: {
path: path.resolve(__dirname, "./dist"),
filename: "index_bundle.js",
publicPath: "/",
},
target: ["web", "es5"],
devServer: {
port: "4002",
static: {
directory: path.join(__dirname, "public"),
},
open: true,
hot: true,
liveReload: true,
historyApiFallback: true,
},
resolve: {
extensions: [".js", ".jsx", ".json", ".css"],
},
module: {
rules: [
{
test: /.(js|jsx)$/,
exclude: /node_modules/,
use: "babel-loader",
},
{
test: /.css$/,
use: [
"style-loader",
{
loader: "css-loader",
options: {
modules: true,
},
},
],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, "public", "index.html"),
}),
],
};
i’ve configured the webpack just like it is said in the documentation