Bundle not Built when using SMP #150

const webpack = require("webpack");
const path = require("path");
const paths = {
  client: path.resolve(__dirname, "../src"),
  dist: path.resolve(__dirname, "../dist"),
  config: path.resolve(__dirname)
};
const babelConfig = require("./babel-loader.config.js");

const isDev =
  process.env.NODE_ENV == "development" || process.env.NODE_ENV == undefined;
const isStaging = process.env.NODE_ENV == "staging";
const isProd = process.env.NODE_ENV == "production";

const globalDefines = {
  __DEBUG__: isDev,
  __DEV__: isDev,
  __STAGING__: isStaging,
  __PROD__: isProd,
  __BASENAME__: JSON.stringify(""),
  "process.env.NODE_ENV": isStaging
    ? JSON.stringify("production") // HACK to run react production build in Staging env
    : JSON.stringify(process.env.NODE_ENV || "development") // For React Production build
};

// const DuplicatePackageCheckerPlugin = require("duplicate-package-checker-webpack-plugin");
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const HardSourceWebpackPlugin = require("hard-source-webpack-plugin");
const MomentLocalesPlugin = require("moment-locales-webpack-plugin");
const SentryWebpackPlugin = require("@sentry/webpack-plugin");
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();

console.log(":: NODE_ENV =", process.env.NODE_ENV);
console.log(":: isDev =", isDev, "isStaging =", isStaging, "isProd =", isProd);

const isVerbose = false;

const _assetName = isDev ? "[name]" : "[name].[chunkhash:8]";
const _imageAssetName = isDev ? "[name]" : "[name].[hash:8]";

const _sourceMaps = true;
const _sourceMapType = isDev ? "cheap-module-eval-source-map" : "source-map";

console.log(
  ":: _sourceMaps =",
  _sourceMaps,
  "_sourceMapType =",
  _sourceMapType
);

const webpackConfig = {
  mode: "none",
  entry: {
    app: path.join(paths.client, "main.js")
  },
  output: {
    path: paths.dist,
    publicPath: "/",
    pathinfo: false,
    filename: _assetName + ".js",
    chunkFilename: _assetName + ".js"
  },
  devtool: _sourceMapType,
  devServer: {
    compress: true,
    contentBase: paths.dist,
    host: "0.0.0.0",
    port: 3000,
    //hotOnly: isDev,
    // clientLogLevel: 'silent',
    hot: isDev,
    historyApiFallback: true,
    stats: false,
    // quiet: true,
    watchContentBase: true
  },
  node: {
    fs: "empty",
    net: "empty",
    tls: "empty"
  },
  module: {
    rules: []
  },
  plugins: [],
  resolve: {
    modules: [paths.client, "node_modules"],
    extensions: ["*", ".js", ".jsx", ".json"]
  },
  optimization: {

    splitChunks: isDev ? false : {
      chunks: 'all',
      name: false,
    },
    runtimeChunk: true,

    removeAvailableModules: isDev && false,
    removeEmptyChunks: isDev && false,
  },
  profile: true,
  stats: {
    children: false,
    cached: isVerbose,
    cachedAssets: false,
    chunks: isVerbose,
    chunkModules: isVerbose,
    colors: true,
    hash: isVerbose,
    modules: isVerbose,
    reasons: isDev,
    timings: true,
    version: isVerbose
  }
};

// JS(X) Loader
webpackConfig.module.rules.push({
  test: /\.js$/,
  sideEffects: false, // Required for TreeShaking, marks all src js as sideEffect free
  exclude: /node_modules/,
  loader: "babel-loader",
  options: babelConfig
});

// Style Loader
webpackConfig.module.rules.push({
  test: /\.(css|scss|sass)$/,
  rules: [
    {
      loader: isDev ? "style-loader" : MiniCssExtractPlugin.loader
    },
    {
      // External CSS
      exclude: paths.client,
      loader: "css-loader",
      options: {
        sourceMap: _sourceMaps
      }
    },
    {
      include: paths.client,
      loader: "css-loader",
      options: {
        sourceMap: _sourceMaps,
        modules: true,
        importLoaders: 2,
        localIdentName: "[name]__[local]___[hash:base64:5]"
      }
    },
    {
      include: paths.client,
      loader: "postcss-loader",
      options: {
        sourceMap: _sourceMaps,
        config: { path: paths.config, ctx: { isDev } }
      }
    },
    {
      include: paths.client,
      test: /\.(scss|sass)$/,
      loader: "sass-loader",
      options: { sourceMap: _sourceMaps }
    }
  ]
});

// Image Loaders
webpackConfig.module.rules.push({
  test: /\.svg$/,
  loader: "url-loader",
  options: {
    fallback: "file-loader",
    name: _imageAssetName + ".[ext]",
    limit: 4096, // 4kb
    mimeType: "image/svg+xml"
  }
});

webpackConfig.module.rules.push({
  test: /\.(eot|woff|woff2|ttf|png|jpg|gif)$/,
  use: {
    loader: "url-loader",
    options: {
      fallback: "file-loader",
      limit: 4096,
      name: _imageAssetName + ".[ext]"
    }
  }
});

// Common Plugins
webpackConfig.plugins.push(
  // new DuplicatePackageCheckerPlugin({verbose:true}),
  // new BundleAnalyzerPlugin(),

  new MomentLocalesPlugin(), // To strip all locales except “en” from moment package
  new CleanWebpackPlugin([paths.dist], { allowExternal: true }),
  new webpack.DefinePlugin(globalDefines),
  new HtmlWebpackPlugin({
    template: path.join(paths.client, "index.html"),
    hash: false,

    filename: "index.html",
    inject: "body",
    minify: {
      collapseWhitespace: true
    }
  }),
  new CopyWebpackPlugin([
    {
      from: path.join(paths.client, "static"),
      to: paths.dist
    }
  ])
);

//Dev-Only Plugins
if (isDev) {
  webpackConfig.plugins.push(
    new HardSourceWebpackPlugin(),
    new webpack.HotModuleReplacementPlugin()
  );
}

//Production-Only Plugins
if (!isDev) {
  webpackConfig.plugins.push(
    new webpack.optimize.ModuleConcatenationPlugin(), // Warning: may cause problems with ES Modules
    new webpack.NoEmitOnErrorsPlugin(),
    new MiniCssExtractPlugin({
      filename: "[name].[contenthash:8].css",
      chunkFilename: "[name].[contenthash:8].css"
    })
    // new SentryWebpackPlugin({
    //   include: ".",
    //   ignoreFile: ".sentrycliignore",
    //   ignore: ["node_modules", "build-config", "src", "stories", "static"],
    //   configFile: path.join(
    //     paths.client,
    //     isProd ? "sentry.properties" : "stagingSentry.properties"
    //   )
    // })
  );
}

if (isProd) {
  webpackConfig.plugins.push(
    new SentryWebpackPlugin({
      include: ".",
      ignoreFile: ".sentrycliignore",
      ignore: [
        "node_modules",
        "build-config",
        "src",
        "stories",
        "static",
        "locales"
      ],
      configFile: path.join(
        paths.client,
        isProd ? "sentry.properties" : "stagingSentry.properties"
      )
    })
  );
}

// Production Optimization
if (!isDev) {
  webpackConfig.optimization.usedExports = true;
  webpackConfig.optimization.sideEffects = true;
  webpackConfig.optimization.concatenateModules = true;
  webpackConfig.optimization.occurrenceOrder = true;
  webpackConfig.optimization.flagIncludedChunks = true;
  webpackConfig.optimization.minimize = true;
  webpackConfig.optimization.minimizer = [
    new UglifyJsPlugin({
      parallel: true,
      cache: true,
      sourceMap: _sourceMaps,
      uglifyOptions: {
        output: {
          comments: false // remove comments
        },
        compress: {
          inline: false,
          unused: true,
          dead_code: true, // big one--strip code that will never execute
          warnings: false, // good for prod apps so users can't peek behind curtain
          drop_debugger: true,
          conditionals: true,
          evaluate: true,
          drop_console: true, // strips console statements
          sequences: true,
          booleans: true
        }
      }
    })
  ];
}
module.exports = smp.wrap(webpackConfig);

// module.exports = webpackConfig;