text: const { resolve } = require('path')
  const webpack = require('webpack')
  
  const HtmlWebpackPlugin = require('html-webpack-plugin')
  
  module.exports = {
    entry: [
      'react-hot-loader/patch',
      // activate HMR for React
  
      'webpack-dev-server/client?http://localhost:8080',
      // bundle the client for webpack-dev-server
      // and connect to the provided endpoint
  
      'webpack/hot/only-dev-server',
      // bundle the client for hot reloading
      // only- means to only hot reload for successful updates
  
      './index.jsx',
      // the entry point of our app
    ],
    output: {
      filename: 'bundle.js',
      // the output bundle
  
      path: resolve(__dirname, 'dist'),
  
      publicPath: '/',
      // necessary for HMR to know where to load the hot update chunks
    },
  
    context: resolve(__dirname, 'src'),
  
    devtool: 'inline-source-map',
  
    devServer: {
      hot: true,
      // enable HMR on the server
  
      contentBase: resolve(__dirname, 'dist'),
      // match the output path
  
      publicPath: '/',
      // match the output `publicPath`
    },
  
    module: {
      rules: [
        {
          test: /\.(js|jsx)$/,
          use: [
            {
              loader: 'babel-loader',
              query: {
                cacheDirectory: true,
              },
            },
          ],
          exclude: /node_modules/,
        },
        {
          test: /\.(css|sass|scss)$/,
          use: [
            'style-loader',
            'css-loader',
            'postcss-loader',
            'resolve-url-loader',
            'sass-loader',
          ],
        },
        {
          test: /\.(jpe?g|png|gif|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
          use: [
            'file-loader',
          ],
        },
        {
          test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
          use: [
            {
              loader: 'url-loader',
              query: {
                limit: 10000,
                mimetype: 'application/font-woff',
              },
            },
          ],
        },
      ],
    },
  
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      // enable HMR globally
  
      new webpack.NamedModulesPlugin(),
      // prints more readable module names in the browser console on HMR updates
  
      new HtmlWebpackPlugin({
        template: '../index.html',
        chunksSortMode: 'dependency',
      }),
    ],
  
    resolve: {
      extensions: ['.js', '.jsx'],
    },
  }
  