webpack config not emitting css in build folder - reactjs

Question

Here is my config for webpack production mode.
const serverConfig = {
//mode: "production",
optimization: {
//minimize: true,
splitChunks: {
chunks: "async",
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: "vendor",
chunks: "all",
},
// server: {
// name: "server",
// chunks: "all",
// enforce: true,
// },
// flightsDesktop: {
// name: "flightsDesktop",
// test: (m, c, entry = "flightsDesktop") => m.constructor.name === "CssModule" && recursiveIssuer(m) === entry,
// chunks: "all",
// enforce: true,
// },
},
},
minimizer: [
new UglifyJsPlugin({
uglifyOptions: {
compress: true,
ecma: 6,
output: {
comments: false,
},
compess: {
dead_code: true,
drop_console: true,
},
},
sourceMap: false,
}),
],
},
entry: {
server: path.resolve(__dirname, "../script/server_script.js"),
flightsDesktop: cssHelper.getFlightsDesktopHomeCss(__dirname),
hotelsDesktop: cssHelper.getHotelsDesktopHomeCss(__dirname),
homestaysDesktop: cssHelper.getHomestayDesktopHomeCss(__dirname),
holidaysDesktop: cssHelper.getHolidayDesktopHomeCss(__dirname),
flightsAdaptive: cssHelper.getFlightsAdaptiveHomeCss(__dirname),
hotelsAdaptive: cssHelper.getHotelsAdaptiveHomeCss(__dirname),
homestaysAdaptive: cssHelper.getHomestayAdaptiveHomeCss(__dirname),
holidaysAdaptive: cssHelper.getHolidayAdaptiveHomeCss(__dirname),
experiencesDesktop: cssHelper.getExperiencesDesktopHomeCss(__dirname),
experiencesAdaptive: cssHelper.getExperiencesAdaptiveHomeCss(__dirname),
hotelsSEODesktop: cssHelper.getHotelsSEODesktopCss(__dirname),
hotelsSEOAdaptive: cssHelper.getHotelsSEOAdaptiveCss(__dirname),
trainsDesktop: cssHelper.getTrainsDesktopHomeCss(__dirname),
trainsAdaptive: cssHelper.getTrainsAdaptiveHomeCss(__dirname),
},
target: "node",
output: {
// path: path.join(__dirname, "../build"),
// filename: "[name].js",
//libraryTarget: "commonjs2",
path: path.join(__dirname, "../build"),
// Generated JS file names (with nested folders).
// There will be one main bundle, and one file per asynchronous chunk.
// We don't currently advertise code splitting but Webpack supports it.
filename: "[name].js",
//chunkFilename: "static/js/[name].[hash:8].chunk.js",
// We inferred the "public path" (such as / or /my-project) from homepage.
publicPath,
},
module: {
rules: [
{
exclude: [
/\.html$/,
/\.(js|jsx)$/,
/\.css$/,
/\.json$/,
/\.svg$/,
],
// loader, query and exclude
loader: "url-loader",
options: {
limit: 10000,
name: "/static/media/[name].[hash:8].[ext]",
},
},
{
test: /\.svg$/,
loader: "file-loader",
options: {
name: "/static/media/[name].[hash:8].[ext]",
},
},
{
test: /\.css$/,
use: [
"style-loader",
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
importLoaders: 1,
minimize: true,
},
},
"postcss-loader",
"sass-loader",
],
// Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
},
{
test: /\.scss$/,
use: [
// MiniCssExtractPlugin.loader,
{
loader: "css-loader/locals",
},
],
},
{
test: /\.(js|jsx)$/,
exclude: /(node_modules)/,
loader: "babel-loader",
query: { presets: ["react", "es2016", "es2015"], plugins: ["transform-class-properties"] },
},
],
},
plugins: [
new webpack.DefinePlugin(env),
//new WriteFilePlugin(),
// This helps ensure the builds are consistent if source hasn't changed:
new webpack.optimize.OccurrenceOrderPlugin(),
// Try to dedupe duplicated modules, if any:
// new webpack.optimize.DedupePlugin(),
// Minify the code.
// new webpack.optimize.UglifyJsPlugin({
// compress: {
// screw_ie8: true, // React doesn't support IE8
// warnings: false,
// },
// mangle: {
// screw_ie8: true,
// },
// output: {
// comments: false,
// screw_ie8: true,
// },
// }),
//new UglifyJsPlugin(),
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css",
path: "static/css/",
}),
//new ExtractTextPlugin("static/css/[name].css"),
new webpack.LoaderOptionsPlugin({
options: {
postcss: [
autoprefixer({
browsers: [
">1%",
"last 4 versions",
"Firefox ESR",
"not ie < 9", // React doesn't support IE8 anyway
],
}),
],
},
}),
],
resolve: {
modules: ["src", "node_modules"],
},
}
module.exports = [serverConfig]
I am miising something obvious, what wrong I am doing?