Treta do Bundle

package.json

{
  "name": "boilerplate",
  "version": "1.0.0",
  "description": "Boilerplate React",
  "main": "index.js",
  "scripts": {
    "start": "SET NODE_ENV=development & webpack-dashboard -- webpack-dev-server -d --hot --config webpack.config.js --watch --mode development",
    "build:test": "SET NODE_ENV=development & webpack --mode none",
    "build:production": "SET NODE_ENV=production & webpack --mode production",
  },
  "keywords": [
    "react",
    "boilerplate",
    "js",
    "javascript",
    "firebase",
    "pwa",
    "babel",
    "node",
    "sass"
  ],
  "repository": {
    "type": "git",
    "url": "git+https://github.com/nurycaroline/react-boilerplate.git"
  },
  "bugs": {
    "url": "https://github.com/nurycaroline/react-boilerplate/issues"
  },
  "homepage": "https://github.com/nurycaroline/react-boilerplate#readme",
  "author": "Nurielly Caroline Brizola",
  "license": "MIT",
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-eslint": "^8.2.6",
    "babel-loader": "^7.1.4",
    "babel-plugin-syntax-decorators": "^6.13.0",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-plugin-transform-async-to-generator": "^6.24.1",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "babel-runtime": "^6.26.0",
    "clean-webpack-plugin": "^1.0.0",
    "compression-webpack-plugin": "^2.0.0",
    "cross-env": "^5.2.0",
    "css-loader": "^0.28.11",
    "eslint": "^4.19.1",
    "eslint-config-airbnb": "^17.0.0",
    "eslint-plugin-import": "^2.13.0",
    "eslint-plugin-jsx-a11y": "^6.1.1",
    "eslint-plugin-react": "^7.10.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "^0.5.0",
    "node-sass": "^4.9.0",
    "optimize-css-assets-webpack-plugin": "^5.0.1",
    "prettier-eslint": "^8.8.2",
    "promise": "^8.0.1",
    "react-hot-loader": "^4.3.3",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.21.0",
    "sw-precache-webpack-plugin": "^0.11.5",
    "uglifyjs-webpack-plugin": "^2.1.1",
    "url-loader": "^1.0.1",
    "webpack": "^4.12.2",
    "webpack-bundle-analyzer": "^3.0.3",
    "webpack-cli": "^3.0.8",
    "webpack-dashboard": "^2.0.0",
    "webpack-dev-server": "^3.1.4",
    "webpack-pwa-manifest": "^4.0.0"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-loadable": "^5.5.0",
    "react-router-dom": "^4.3.1"
  }
}

Router.js

import React, { Component } from 'react';
import { Switch, Route } from 'react-router-dom';

const PAGES = [
  {
    name: 'Home',
    path: '/',
    loader: './pages/Home',
  },
];

const PAGES_DEVELOPER = [
  {
    name: 'PAGE A',
    path: '/pagea',
    loader: './pages/PageA',
  },
];
const PAGES_PRODUCTION = [
  {
    name: 'PAGE B',
    path: '/pageb',
    loader: './pages/PageB',
  },
  {
    name: 'PAGE C',
    path: '/pagec',
    loader: './pages/PageC',
  },
];

if(process.env.NODE_ENV === 'development') {
  PAGES.push(...PAGES_DEVELOPER)
} else {
  PAGES.push(...PAGES_PRODUCTION)
}

class DynamicImport extends Component {
  state = {
    component: null,
  };

  componentDidMount() {
    this.props.load().then((component) => {
      this.setState(() => ({
        component: component.default ? component.default : component,
      }));
    });
  }

  render() {
    return this.props.children(this.state.component);
  }
}


class Routers extends Component {
  state = {
    Home: null,
    PageA: null,
  };

  async componentWillMount() {
    console.log(PAGES);
    await Promise.all(
      PAGES.map(async (r) => {
        const Compo =  props => (
          <DynamicImport load={() => import(`${r.loader}` /* webpackChunkName: Home */)}>
            {Component => (Component === null ? <div> loading... </div> : <Component {...props} />)
            }
          </DynamicImport>
        );
        this.setState({[r.name]: Compo})
      }),
    );
  }

  render() {
    if (!this.state.Home) return <div />;
    console.log(PAGES);
    return (
      <Switch>
        {PAGES.map(r => (
          <Route
            key={r.name}
            exact
            path={r.path}
            component={this.state[r.name] ? this.state[r.name] : ''}
          />
        ))}
      </Switch>
    );
  }
}

export default Routers;

webpack.config.js

const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssets = require('optimize-css-assets-webpack-plugin');
const DashboardPlugin = require('webpack-dashboard/plugin');
const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin');
const WebpackPwaManifest = require('webpack-pwa-manifest');
const CompressionPlugin = require('compression-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer')
  .BundleAnalyzerPlugin;

const devMode = process.env.NODE_ENV === 'development';

const config = {
  entry: [
    'babel-polyfill',
    'react-hot-loader/patch',
    './src/index.js',
  ],
  // devtool: 'source-map',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'build'),
    chunkFilename: '[name].bundle.js',
  },
  optimization: {
    minimize: !devMode,
    minimizer: [
      new UglifyJsPlugin({
        parallel: true,
        sourceMap: true,
        uglifyOptions: {
          output: {
            comments: /copyright/i,
          },
          compress: {
            // Fixes bad function inlining minification.
            // See https://github.com/webpack/webpack/issues/6760,
            // https://github.com/webpack/webpack/issues/6567#issuecomment-369554250
            inline: 1,
          },
          mangle: {
            safari10: true,
          },
        },
      }),
    ],
    usedExports: true,
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env', 'react', 'stage-2', 'es2015'],
            plugins: ['transform-class-properties'],
          },
        },
      },
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader',
        ],
      },
      {
        test: /\.(eot|ttf|woff|woff2|otf)$/,
        loader: 'file-loader',
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loaders: [
          {
            loader: 'file-loader',
            options: {
              name: 'assets/images/[name].[ext]',
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new BundleAnalyzerPlugin(),
    new CleanWebpackPlugin(['build']),
    new DashboardPlugin(),
    new CompressionPlugin({
      test: /\.js/,
      algorithm: 'gzip',
    }),
    new WebpackPwaManifest({
      name: 'React Boilerplate PWA',
      short_name: 'RBPwa',
      filename: 'manifest.json',
      description: 'RB - React Boilerplate PWA!',
      background_color: '#ffffff',
      icons: [
        {
          src: `${__dirname}/src/assets/logo.png`,
          sizes: [96, 128, 192, 256, 384, 512], // multiple sizes
        },
        {
          src: `${__dirname}/src/assets/logo.png`,
          size: '1024x1024', // you can also use the specifications pattern
        },
      ],
    }),
    new SWPrecacheWebpackPlugin({
      cacheId: 'react-boilerplate',
      dontCacheBustUrlsMatching: /\.\w{8}\./,
      filename: 'service-worker.js',
      minify: true,
      navigateFallback: '/index.html',
      staticFileGlobsIgnorePatterns: [
        /\.map$/,
        /asset-manifest\.json$/,
      ],
    }),
    new HtmlWebpackPlugin({
      favicon: './public/favicon.ico',
      template: './public/index.html',
      filename: 'index.html',
      title: 'RB - React Boilerplate',
      inject: 'body',
      minify: {
        collapseWhitespace: true,
      },
      meta: {
        'og:image': `${__dirname}/src/assets/logo.png`,
      },
    }),
    new MiniCssExtractPlugin({
      filename: 'styles.css',
    }),
    new webpack.HotModuleReplacementPlugin(),
  ],
  devServer: {
    contentBase: path.resolve(__dirname, 'build'),
    open: true,
    hot: true,
    clientLogLevel: 'warning',
    stats: {
      colors: true,
    },
    overlay: true,
    historyApiFallback: true,
    headers: {
      'X-Custom-Header': 'yes',
      'X-Powered-By': 'Fq',
    },
  },
};

module.exports = config;

if (process.env.NODE_ENV === 'production') {
  module.exports.plugins.push(
    new OptimizeCSSAssets(), // call the css optimizer (minification)
  );
}