Updating webpack.dev.config from Webpack 1 to 4

For the open source site, ReForum, I'm trying to update the site to the latest components (ie: webpack 4, react 16, etc). I started with babel and it upgraded smoothly. Then moved to webpack. I spent more than 10 hours trying various configs until I finally got it to compile using the following:

/** * module dependencies for webpack dev configuration * Proper webpack dev setup: * https://medium.freecodecamp.org/how-to-develop-react-js-apps-fast-using-webpack-4-3d772db957e4 */ const path = require('path'); const webpack = require('webpack'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const autoprefixer = require('autoprefixer'); // define paths const nodeModulesPath = path.resolve(__dirname, '../node_modules'); const buildPath = path.resolve(__dirname, '../public', 'build'); const mainAppPath = path.resolve(__dirname, '../frontend', 'App', 'index.js'); const sharedStylesPath = path.resolve(__dirname, '../frontend', 'SharedStyles'); const componentsPath = path.resolve(__dirname, '../frontend', 'Components'); const containersPath = path.resolve(__dirname, '../frontend', 'Containers'); const viewsPath = path.resolve(__dirname, '../frontend', 'Views'); /** * webpack development configuration */ module.exports = { mode: 'development', target: 'web', devtool: 'inline-source-map', entry: [ 'webpack-hot-middleware/client', mainAppPath, ], output: { filename: 'bundle.js', path: buildPath, publicPath: '/build/', }, plugins: [ new MiniCssExtractPlugin({ // Options similar to the same options in webpackOptions.output // both options are optional filename: '[name].css', chunkFilename: '[id].css', }), new webpack.HotModuleReplacementPlugin(), ], module: { rules: [ { test: /\.js$/, use: [ 'babel-loader' ], exclude: [nodeModulesPath], }, { test: /\.(sa|sc|c)ss$/, use: [ 'style-loader', 'css-loader', // 'postcss-loader', { loader: 'postcss-loader', options: { sourceMap: true, plugins() { return [autoprefixer('last 5 version')]; }, // plugins: () => [require('autoprefixer')({ // 'browsers': ['> 1%', 'last 5 versions'], // })], }, }, 'sass-loader', ], }, { test: /\.(png|jpg)$/, use: ['url-loader?limit=8192'] }, { test: /\.svg$/, use: ['url-loader?limit=10000&mimetype=image/svg+xml'] }, ], }, resolve : { // automatically resolve file extensions (ie import File from '../path/file') extensions: ['.js', '.css'], // alias to call specified folders alias: { SharedStyles: sharedStylesPath, Components: componentsPath, Containers: containersPath, Views: viewsPath, }, }, }; 

Original Webpack 1 dev config

However, the React elements classname disappear, preventing the styles from being applied. It should be like:

But instead is:

Also, the head now have multiple <style>s .

Please help me get classnames to reappear and fix the multiple head style elements.

FYI, the only way I was able to get postcss-loader to run is by turning it into an object. It would fail with errors like "Error: No PostCSS Config found in ... "

Update 1:

Tried @noppa and @Alex Ilyaev suggestions the following but it didn't work.

 { test: /\.(sa|sc|c)ss$/, use: [ 'style-loader', // 'css-loader', { loader: 'css-loader', options: { modules: true, loaders: true, importLoaders: 1, localIndentName:'[name]__[local]___[hash:base64:5]', }, }, // 'postcss-loader', { loader: 'postcss-loader', options: { sourceMap: 'inline', options: { ident: 'postcss', plugins: (loader) => [ require('autoprefixer')(), ], }, }, }, ], },