text: const path = require('path')
  const BrowserSyncPlugin = require('browser-sync-webpack-plugin')
  const MiniCssExtractPlugin = require('mini-css-extract-plugin')
  
  require('dotenv').config()
  
  let portNum
  
  if (process.env.PORT) {
    portNum = process.env.PORT
  } else {
    portNum = '8000'
  }
  
  module.exports = {
    // click on the name of the option to get to the detailed documentation
    // click on the items with arrows to show more examples / advanced options
  
    entry: './src/main.js', // string | object | array
    // Here the application starts executing
    // and webpack starts bundling
  
    output: {
      // options related to how webpack emits results
  
      path: path.resolve(__dirname, 'javascripts'), // string
      // the target directory for all output files
      // must be an absolute path (use the Node.js path module)
  
      filename: 'bundle.js', // string
      // the filename template for entry chunks
  
      publicPath: '', // string
      // the url to the output directory resolved relative to the HTML page
  
      library: 'reformation-500-omeka-theme', // string,
      // the name of the exported library
  
      libraryTarget: 'umd' // universal module definition
      // the type of the exported library
    },
  
    module: {
      // configuration regarding modules
  
      rules: [
        // rules for modules (configure loaders, parser options, etc.)
  
        {
          test: /\.js?$/,
          include: [
            path.resolve(__dirname, 'src')
          ],
          // these are matching conditions, each accepting a regular expression or string
          // test and include have the same behavior, both must be matched
          // exclude must not be matched (takes preferrence over test and include)
          // Best practices:
          // - Use RegExp only in test and for filename matching
          // - Use arrays of absolute paths in include and exclude
          // - Try to avoid exclude and prefer include
  
          // enforce: 'pre',
          // enforce: 'post',
          // flags to apply these rules, even if they are overridden (advanced option)
  
          loader: 'babel-loader'
          // the loader which should be applied, it'll be resolved relative to the context
          // -loader suffix is no longer optional in webpack2 for clarity reasons
          // see webpack 1 upgrade guide
  
          // options: {
          //   presets: ['es2015']
          // }
          // options for the loader
        },
        {
          test: /\.(jpg|png|gif|svg)$/,
          loader: 'url-loader?limit=8000&name=../images/[name].[ext]'
        },
        {
          test: /\.css?$/,
          use: [
            {
              loader: MiniCssExtractPlugin.loader,
              options: {
                // you can specify a publicPath here
                // by default it use publicPath in webpackOptions.output
                // publicPath: 'css'
              }
            },
            'css-loader', 'postcss-loader'
          ]
        }
      ]
  
      /* Advanced module configuration (click to show) */
    },
  
    resolve: {
      // options for resolving module requests
      // (does not apply to resolving to loaders)
  
      modules: [
        'node_modules',
        path.resolve(__dirname, 'src')
      ],
      // directories where to look for modules
  
      extensions: ['.js', '.json', '.jsx', '.css']
      // extensions that are used
    },
  
    performance: {
      hints: 'warning', // enum
      maxAssetSize: 200000, // int (in bytes),
      maxEntrypointSize: 400000, // int (in bytes)
      assetFilter: function (assetFilename) {
        // Function predicate that provides asset filenames
        return assetFilename.endsWith('.css') || assetFilename.endsWith('.js')
      }
    },
  
    devtool: 'source-map', // enum
    // enhance debugging by adding meta info for the browser devtools
    // source-map most detailed at the expense of build speed.
  
    context: __dirname, // string (absolute path!)
    // the home directory for webpack
    // the entry and module.rules.loader option
    //   is resolved relative to this directory
  
    target: 'web', // enum
    // the environment in which the bundle should run
    // changes chunk loading behavior and available modules
  
    stats: 'errors-only',
    // lets you precisely control what bundle information gets displayed
  
    devServer: {
      proxy: { // proxy URLs to backend development server
        '/api': 'http://localhost:3000'
      },
      contentBase: path.join(__dirname, 'build'), // boolean | string | array, static file location
      compress: true, // enable gzip compression
      historyApiFallback: true, // true for index.html upon 404, object for multiple paths
      hot: true, // hot module replacement. Depends on HotModuleReplacementPlugin
      https: false, // true for self-signed, object for cert authority
      noInfo: true // only errors & warns on hot reload
    },
  
    plugins: [
      new BrowserSyncPlugin({
        host: 'localhost',
        port: 3000,
        proxy: `http://localhost:${portNum}`,
        open: false
      }),
      new MiniCssExtractPlugin({
        filename: '../css/styles.css'
      })
    ]
  }
  