/*
* User webpack settings file. You can add your own settings here.
* Changes from this file will be merged into the base webpack configuration file.
* This file will not be overwritten by the subsequent spfx-fast-serve calls.
*/

// you can add your project related webpack configuration here, it will be merged using webpack-merge module
// i.e. plugins: [new webpack.Plugin()]

const path = require("path");

const webpackConfig = {
  resolve: {
    alias: {
      "@webparts": path.resolve(__dirname, "..", "src/webparts"),
      "@src": path.resolve(__dirname, "..", "src"),
    }
  }
}

// for even more fine-grained control, you can apply custom webpack settings using below function
const transformConfig = function (initialWebpackConfig) {
  // transform the initial webpack config here, i.e.
  // initialWebpackConfig.plugins.push(new webpack.Plugin()); etc.

  initialWebpackConfig.module.rules.push(
    {
      test: /node_modules[\/\\]@?react-leaflet[\/\\].*.js$/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: [
            ['@babel/preset-env', { targets: "defaults" }]
          ],
          plugins: ['@babel/plugin-proposal-nullish-coalescing-operator']
        }
      }
    }
  );

  return initialWebpackConfig;
}

module.exports = {
  webpackConfig,
  transformConfig
}