Как в Webpack 4 настроить Css Modules?

Это можно делать только в react.js приложениях в простом HTML файле такое у вас не получитсья

1 способ. В create-react-app это делаетсья с помощью конфигурации webpack.

Чтобы получить конфигурацию webpack-а после create-react-app нам надо сделать npm-run-eject после в консоли получим такой вопрос

Are you sure want to eject?

после нажатия Y как только консоль завершил свою работу вы увидите в папке проекта два новых папок scripts и config

Первую папку не трогаем.Во второй папке(config) находим файл webpack.config.dev.js В этой конфигурации находим строку где написано loader:require.resolve('css-loader')и пишем следующее

{
   test:/\.css$/,
   use: [
      require.resolve('style-loader'),
      {
         loader:require.resolve('css-loader')
         options: {
            importLoaders:1,
           //Вот с этой строки начинаем менять webpack.config
            modules:true, // 1
            localIdentName: '[name]__[local]__[hash:base64:5]' //2
         }
      }
   ]
}

Эти же изменение скопируете и вставляете в файл webpack.config.prod.js для того чтобы и в продакшене у вас было тоже самое. Только не надо эти изменения перезаписать вместо minimize:true или sourceMap:shouldUseSourceMap

Проста напишите эти две изменения после них.

Теперь работаем с компонентом. У вас должно быть 2 файла в одной папке App.js и App.css

Также для теста напишите эти классы в свой App.css

.blue {
    background:blue;
    font-weight:bold;
}
.red {
   color:red;
   border:2px solid green;
}

Импортируем css из нашего компонента таким способом.

import classesFromApp from "./App.css";

И последний штрих используем их в JSX таким образом

<div className={classesFromApp.red}>
</div>

или же

<div className={classesFromApp.blue}>
</div>

И после компиляции в консоли вы получаете такой CSS класс app__blue___2XkY0 :)

2 способ установка в проекте Laravel CSS-Modules в Laravel-mix

Надо загрузить и установить пакет laravel-mix-react-css-modules

И потом установить в webpack.mix.js таким образом

let mix = require('laravel-mix');
require('laravel-mix-react-css-modules');
mix.react('resources/assets/app.js', 'public/js')
   .reactCSSModules('[name]__[local]___[hash:base64:5]');

И запустить также с компонентом App.js в одной папке с App.css как указано наверху и все.