__server_and_client__webpack.config.js

const path = require('path')
const chalk = require('chalk')
const fs = require('fs-extra')
const webpack = require('webpack')
const merge = require('webpack-merge')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
console.log(chalk.yellow(`${'+'.repeat(70)}\n`))

const outputPath = path.resolve(__dirname, 'dist')
const sassIncludePaths = [
  path.resolve(__dirname, 'node_modules', 'susy', 'sass'),
  path.resolve(__dirname, 'node_modules', 'breakpoint-sass', 'stylesheets'),
  path.resolve(__dirname, 'node_modules', 'font-awesome', 'scss')
]

var commonClientConfig = {}
var develepmentClientConfig = {}
var productionClientConfig = {}
var combinedClientConfig = {}
var serverConfig = {}
var allConfigs = []

commonClientConfig = {
  context: __dirname,
  entry: {
    root: [
      'react-hot-loader/patch',// './js/client.js'
      path.resolve(__dirname, 'js', 'client.js')
    ],
  },
  output: {
    filename: 'bundle.js',
    path: outputPath,
    publicPath: ''
  },
  resolve: {
    extensions: ['.js', '.jsx', '.json'],
  },
  stats: {
    colors: true,
    reasons: true,
    chunks: true
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        include: path.resolve(__dirname, 'js'),
        loader: 'babel-loader'
      },
      {
        test: require.resolve('ramda'),
        use: [{
          loader: 'expose-loader',
          options: 'R'
        }]
      }
    ]
  },
  plugins: [
    new webpack.NoEmitOnErrorsPlugin(),
    new HtmlWebpackPlugin({
      favicon: './favicon.ico',
      filename: 'index.html',
      template: path.resolve(__dirname, 'src', 'index.template.ejs'),
      inject: 'body'
    })
  ]
}

if (process.env.NODE_ENV === 'production') {
  console.log(chalk.green('PRODUCTION'));
  fs.emptyDirSync(outputPath)
  productionClientConfig = {
    output: {
      pathinfo: false,
    },
    devtool:'source-map',
    module: {
      rules: [
        {
          test: /\.s?css/,
          use: ExtractTextPlugin.extract({
            loader: ['css-loader', 'sass-loader'],
            fallback: 'style-loader',
            use: [
              {
                loader: 'css-loader',
                options: {
                  minimize: true,
                  sourceMap: true
                }
              },
              {
                loader: 'postcss-loader'
              },
              {
                loader: 'sass-loader',
                options: {
                  includePaths: sassIncludePaths
                }
              },
            ]
          })
        }
      ]
    },
    plugins: [
      new ExtractTextPlugin({
        filename: '[name].[contenthash].css'
      }),
      new UglifyJSPlugin({
        comments: false
      })
    ]
  }

  combinedClientConfig = merge(commonClientConfig, productionClientConfig)

  serverConfig = {
    name: "server code",
    entry: "./src/server/index.js",
    output: {
      filename: "./dist/server/index.js"
    },
    target: "node",
    node: {
      __dirname: false
    },
    plugins: [
      new CopyWebpackPlugin([
        {
          from: path.resolve(__dirname, 'src', 'server', 'configs'),
          to: path.resolve(__dirname, 'dist', 'server', 'configs')
        },
        {
          from: path.resolve(__dirname, 'src', 'images'),
          to: path.resolve(__dirname, 'dist', 'images')
        }
      ])
    ]
    // externals: [
    //   nodeExternals({
    //     whitelist: ["express", "chalk"],
    //     modulesFromFile: true
    //   })
    // ]
  }
  allConfigs.push(combinedClientConfig, serverConfig)
} else {
  console.log(chalk.blue('DEVELOPMENT'));

  develepmentClientConfig = {
    output: {
      pathinfo: true,
    },
    devtool: 'cheap-module-source-map',
    module: {
      rules: [
        {
          test: /\.scss$/,
          use: [
            {
              loader: 'style-loader'
            },
            {
              loader: 'css-loader',
              options: {
                sourceMap: true
              }
            },
            {
              loader: 'sass-loader',
              options: {
                includePaths: sassIncludePaths
              }
            }
          ]
        }
      ]
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin()
    ],
    devServer: {
      historyApiFallback: true,
      hot: true,
      inline: true,
      port: 5888,
      proxy: {
        '/api': {
         target: 'http://localhost:6500'
        }
      }
    }
  }
  combinedClientConfig = merge(commonClientConfig, develepmentClientConfig)
  allConfigs = combinedClientConfig
}

module.exports = allConfigs