webpack.config.js

/* eslint-disable */
const enableOfflinePlugin = false

const __DEV__ = process.env.NODE_ENV === 'development'
const __OFFLINE__ = enableOfflinePlugin && !__DEV__

const path = require('path')
const glob = require('glob')
const webpack = require('webpack')

const HtmlWebpackPlugin = require('html-webpack-plugin')
const CompressionPlugin = require('compression-webpack-plugin');
const WorkboxPlugin = require('workbox-webpack-plugin');
const WebpackPwaManifest = require('webpack-pwa-manifest');

const CopyWebpackPlugin = require('copy-webpack-plugin')
const OfflinePlugin = require('offline-plugin')

const outputPath = path.join(__dirname, '../dist/rnw')
const publicPath = __DEV__ ?'/': 'https://mycdn.com/rnw/'
const staticPath = path.join(__dirname, '../static')

const {BundleAnalyzerPlugin} = require('webpack-bundle-analyzer');

const prodPlugins = [
  new webpack.optimize.AggressiveMergingPlugin(),
  new CompressionPlugin({
    asset: '[path].gz[query]',
    algorithm: 'gzip',
    test: /\.js$|\.css$|\.html$/,
    threshold: 10240,
    minRatio: 0.8
  }),
  new WorkboxPlugin.GenerateSW({
    // these options encourage the ServiceWorkers to get in there fast
    // and not allow any straggling "old" SWs to hang around
    clientsClaim: true,
    skipWaiting: true
  })
]


const plugins = [

  new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
    __DEV__,
    __OFFLINE__,
  }),
  new HtmlWebpackPlugin({
    filename: 'index.html',
    template: 'web/templates/index.ejs',
    chunks: ['vendors', 'app']

  }),

  new CopyWebpackPlugin([
    { context: outputPath, from: '*.png', to: 'images/' },
    { context: outputPath, from: staticPath, to: 'static/' },
  ]),
  ...(__DEV__ ? [] : prodPlugins)
]

// If offline plugin is enabled, it has to come last.
if (__OFFLINE__) plugins.push(new OfflinePlugin())

module.exports = {
  devServer: {
    compress: true,
    hot: true,
    contentBase: outputPath,
    disableHostCheck: true,
    https: false,
    historyApiFallback: {
      index: '/'
    }
  },
  entry: {
    app: path.join(__dirname, '../index.web.js')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loaders: 'babel-loader?cacheDirectory=true',
        options: {
          'plugins': ['lodash'],
        }
      },
      {
        test: /\.ttf$/,
        loader: 'url-loader',
        include: path.resolve(__dirname, '../node_modules/react-native-vector-icons')
      },
      {
        // Many react-native libraries do not compile their ES6 JS.
        test: /\.js$/,
        include: /node_modules\/react-native-/,
        // react-native-web is already compiled.
        exclude: /node_modules\/react-native-web\//,
        loader: 'babel-loader',
        query: {cacheDirectory: true}
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        loader: 'react-native-web-image-loader?name=[name].[ext]&scalings[@2x]=2&scalings[@3x]=3',
        options: {
          limit: 8000, // Convert images < 8kb to base64 strings
          name: 'images/[hash:8]_[name].[ext]',
          publicPath: '/rnw/'
        }
      },
      {
        test: /\.(mp3|wav)$/,
        loader: 'file-loader',
        query: {name: 'sounds/[name]-[hash:16].[ext]'}
      },
      { // needed for react-native-web-webview
        test: /postMock.html$/,
        include: /node_modules\/react-native-/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]'
        }
      }
    ]
  },
  output: {
    path: outputPath,
    filename: 'js/[name]-[hash:16].js',
    chunkFilename: 'js/[name]-[hash:16].bundle.js',
    publicPath: publicPath
  },
  optimization: {
    minimize: !__DEV__,
    moduleIds: 'named',
    splitChunks: {
      chunks: 'async',
      name: true,
      cacheGroups: {
        commons: {
          chunks: 'all',
          priority: -10
        },
        default: false
      }
    }
  },
  plugins: plugins,
  devtool: 'source-map',
  resolve: {
    alias: {
      //react native
      'react-native': 'react-native-web',
      'react-native-linear-gradient': 'react-native-web-linear-gradient',
      'WebView': 'react-native-web-webview',
      // Since We have no vector graphics in our code, we are stubbing this library with empty implementation
      'react-art': path.resolve(__dirname, '../dummyReactArt.js'), // dummyReactArt.js has just an empty module export 'module.exports={}'

    },
    modules: [
      path.resolve(__dirname, 'MyReactNative/src'),
      path.resolve(__dirname, 'web'),
      'node_modules'
      ],
    extensions: [".web.js", ".js", ".json"]
  }
};