Deploy react apps, recommendations?

Question

css

Good afternoon! Please help me deploy the app.
There are several questions.
1. How to load another webpack config in production? (For now, I just have "build": "webpack -p" in packege.json
2. What to use in this config (for example, how to remove all console.log() with a command)?
3. How to make sass compile into a separate file?
I would be grateful for any recommendations,
at the moment the config looks like this:

const webpack = require('webpack')
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const outputPath = path.resolve(__dirname, './dist')
const ExtractTextPlugin = require("extract-text-webpack-plugin");

const extractSass = new ExtractTextPlugin({
  filename: "bundle.css",
  disable: process.env.NODE_ENV === "development"
});
const webpackConfig = {
  entry: {
    app: [
      'react-hot-loader/patch',
      path.resolve(__dirname, './src/index.js')
    ]
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        enforce: 'pre',
        use: 'eslint-loader'
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      {
        test: /\.scss$/,
        exclude: /node_modules/,

        use: [
          {
            loader: "style-loader"
          }, {
            loader: "css-loader", options: {
              sourceMap: true
            }
          }, {
            loader: "sass-loader", options: {
              sourceMap: true
            }
          }]
      },
      {
        test: /\.(gif|png|jpg|jpeg|svg)$/,
        exclude: /node_modules/,
        include: path.resolve(__dirname, './src/assets/'),
        use: 'url-loader?limit=10000&name=assets/[name]-[hash].[ext]'
      }
    ]
  },
  resolve: {
    alias: {
      'components': path.resolve(__dirname, './src/components'),
      'containers': path.resolve(__dirname, './src/containers'),
      'constants': path.resolve(__dirname, './src/constants'),
      'actions': path.resolve(__dirname, './src/actions'),
      'reducers': path.resolve(__dirname, './src/reducers'),
      'store': path.resolve(__dirname, './src/store'),
      'assets': path.resolve(__dirname, './src/assets'),
      'helpers': path.resolve(__dirname, './src/helpers'),
    }
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, './src/assets/index.html'),
      filename: 'index.html',
      path: outputPath
    }),
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin(),
    extractSass
  ],
  devServer: {
    contentBase: path.resolve(__dirname, './dist'),
    port: 8080,
    historyApiFallback: true,
    inline: true,
    hot: true,
    host: '0.0.0.0',
    watchOptions: {aggregateTimeout: 300, poll: 1000},
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
      "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
    }

  }
};

module.exports = webpackConfig;

Thank you!

Answer 1

You can try to compensate with a second pseudo-element with a light shadow
https://codepen.io/anon/pen/wVoONB

Answer 2

1. How to load another webpack config in production? (For now I just have "build": "webpack -p" in packege.json

scripts: {
  "dev": "webpack-dev-server --env.dev",
  "build": "webpack -p --env.prod"
}

UglifyJSPlugin + drop_console
ExtractTextWebpackPlugin + sass-loader
In general, look towards create-react-app .