const webpack = require('webpack')
const HTMLPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: {
    main: ['babel-polyfill', './src/index.js']
  },
  node: {
    fs: 'empty'
  },
  module: {
    rules: [
      { test: /\.(js|jsx)$/, exclude: /node_modules/, use: ['babel-loader'] },
      { test: /\.(css|sass|scss)$/, use: ['style-loader', { loader: MiniCssExtractPlugin.loader }, 'css-loader', 'sass-loader'] },
      { test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)(\?.*$|$)/, use: ['file-loader'] }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
  plugins: [
    new webpack.ProvidePlugin({
      'React': 'react'
    }),
    new HTMLPlugin({
      title: 'MyApp',
      hash: true,
      template: 'src/index.html'
    }),
    new MiniCssExtractPlugin(),
  ]
}