/* eslint-disable import/no-extraneous-dependencies */

const { HotModuleReplacementPlugin } = require('webpack');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
const commonPaths = require('./paths');

module.exports = {
  devtool: 'cheap-eval-source-map',
  output: {
    filename: '[name].js',
    path: commonPaths.outputPath,
    chunkFilename: '[name].js',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/, // allows both .jsx and .js
        exclude: /node_modules/,
        include: commonPaths.source,
        loader: 'babel-loader',
        options: {
          cacheDirectory: true,
          plugins: ['react-hot-loader/babel'],
        },
      },
      {
        test: /\.(sa|sc|c)ss$/,
        use: [{
          loader: 'style-loader',
        },
        {
          loader: 'css-loader',
          options: {
            modules: false,
          },
        },
        {
          loader: 'sass-loader',
        },
        ],
      },
    ],
  },
  devServer: {
    contentBase: commonPaths.outputPath,
    compress: true,
    hot: true,
    port: 3000,
  },
  plugins: [
    new HotModuleReplacementPlugin(),
    new BundleAnalyzerPlugin({
      analyzerPort: 8888,
      openAnalyzer: false,
    }),
  ],
};