webpack 4 config for react

package.json

{
  "name": "whitealbum.io",
  "description": "whitealbum.io",
  "version": "1.0.0",
  "keywords": [
    "blog"
  ],
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server",
    "build": "webpack --config webpack.prod.config.js"
  },
  "author": "isaac young",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^8.1.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-plugin-module-resolver": "^3.1.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-preset-stage-1": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "caniuse-lite": "^1.0.30000815",
    "clean-webpack-plugin": "^0.1.19",
    "copy-webpack-plugin": "^4.5.1",
    "css-loader": "^0.28.11",
    "cssnano": "^3.10.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.0.6",
    "node-sass": "^4.7.2",
    "offline-plugin": "^4.9.0",
    "postcss": "^6.0.19",
    "postcss-cssnext": "^3.0.2",
    "postcss-loader": "^2.1.1",
    "sass-loader": "^6.0.7",
    "standard": "^11.0.1",
    "style-loader": "^0.20.3",
    "url-loader": "^1.0.1",
    "webpack": "^4.1.1",
    "webpack-cli": "^2.0.12",
    "webpack-dev-server": "^3.1.1"
  },
  "browserslist": [
    "last 5 versions",
    "chrome >= 34",
    "safari >= 6",
    "ios >= 6",
    "android >= 4.4"
  ],
  "dependencies": {
    "axios": "^0.18.0",
    "babel-polyfill": "^6.26.0",
    "babel-runtime": "^6.26.0",
    "classnames": "^2.2.5",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "styled-components": "^3.2.3"
  },
  "standard" : {
    "globals": ["self",
      "fetch",
      "caches",
      "URL",
      "Response",
      "location",
      "clients"
    ]
  }
}

webpack.config.js

const webpack = require('webpack')
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
  entry: {
    app: './index.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[hash].js',
    publicPath: '/'
  },
  devtool: 'inline-source-map',
  mode: 'development',
  module: {
    rules: [{
      test: /\.js$/,
      use: ['babel-loader'],
      exclude: [
        path.resolve(__dirname, 'node_modules')
      ]
    },
    {
      test: /\.scss$/,
      use: ExtractTextWebpackPlugin.extract(
        {
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader',
              options: {
                module: true,
                localIdentName: '[local]-[hash:base64:5]'
              }
            },
            {
              loader: 'postcss-loader',
              options: {
                sourceMap: true,
                config: {
                  path: 'postcss.config.js'
                }
              }
            },
            {
              loader: 'sass-loader',
              options: {
                sourceMap: true
              }
            }
          ]
        }
      )
    },
    {
      test: /\.(png|svg|jpg|gif)$/,
      use: [{
        loader: 'url-loader',
        options: {
          name: '[name].[hash:8].[ext]',
          outputPath: 'assets/',
          limit: 10000
        }
      }]
    },
    {
      test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
      loader: 'url-loader',
      options: {
        limit: 50000,
        outputPath: 'assets/',
        name: '[name].[hash:8].[ext]'
      }
    }
    ]
  },
  plugins: [
    new ExtractTextWebpackPlugin({ disable: true }),
    new HtmlWebpackPlugin({
      template: './index.html'
    }),
    new CopyWebpackPlugin(
      [
        {
          from: './src/assets/favicon.ico',
          to: './'
        },
        {
          from: './src/assets/favicon.png',
          to: './'
        },
        {
          from: './src/static/',
          to: './static/'
        },
        {
          from: './src/manifest.json',
          to: './'
        },
        {
          from: './src/sw.js',
          to: './'
        }
      ]
    ),
    new webpack.HotModuleReplacementPlugin()
  ],
  devServer: {
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/api'
        }
      }
    },
    historyApiFallback: true,
    hot: true,
    host: '0.0.0.0',
    inline: true,
    disableHostCheck: true,
    contentBase: './dist'
  }
}

webpack.prod.config.js

const webpack = require('webpack')
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = {
  entry: {
    app: './index.js'
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[chunkhash].js',
    publicPath: '/'
    // publicPath: 'https://whitealbum.io/'
  },
  mode: 'production',
  module: {
    rules: [{
      test: /\.js$/,
      use: ['babel-loader'],
      exclude: [
        path.resolve(__dirname, 'node_modules')
      ]
    },
    {
      test: /\.scss$/,
      use: ExtractTextWebpackPlugin.extract(
        {
          fallback: 'style-loader',
          use: [
            {
              loader: 'css-loader',
              options: {
                module: true,
                localIdentName: '[local]-[hash:base64:5]'
              }
            },
            {
              loader: 'postcss-loader',
              options: {
                sourceMap: true,
                config: {
                  path: 'postcss.config.js'
                }
              }
            },
            {
              loader: 'sass-loader',
              options: {
                sourceMap: true
              }
            }
          ]
        }
      )
    },
    {
      test: /\.(png|svg|jpg|gif)$/,
      use: [
        {
          loader: 'url-loader',
          options: {
            name: '[name].[hash:8].[ext]',
            outputPath: 'assets/',
            limit: 10240
          }
        }
      ]
    },
    {
      test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
      loader: 'url-loader',
      options: {
        limit: 50000,
        outputPath: 'assets/',
        name: '[name].[hash:8].[ext]'
      }
    }
    ]
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new CleanWebpackPlugin('dist'),
    new webpack.NamedChunksPlugin(
      chunk => chunk.name ||
      Array.from(chunk.modulesIterable, m => path.basename(m.request, '.js')).join('')
    ),
    new webpack.HashedModuleIdsPlugin(),
    new ExtractTextWebpackPlugin('[name].[contenthash].css'),
    new HtmlWebpackPlugin({
      template: './index.html'
    }),
    new CopyWebpackPlugin(
      [
        {
          from: './src/assets/favicon.ico',
          to: './'
        },
        {
          from: './src/assets/favicon.png',
          to: './'
        },
        {
          from: './src/static/',
          to: './static/'
        },
        {
          from: './src/manifest.json',
          to: './'
        },
        {
          from: './src/sw.js',
          to: './'
        }
      ]
    )
  ],
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendors: {
          test: chunk => (
            chunk.resource &&
            /\.js$/.test(chunk.resource) &&
            /node_modules/.test(chunk.resource)
          ),
          chunks: 'initial',
          name: 'vendors'
        }
      }
    },
    runtimeChunk: { name: 'runtime' }
  }
}