How to use the @rails/webpacker.environment.config function in @rails/webpacker

const { environment } = require('@rails/webpacker')

// Remove the digest from the output js filename.
// https://github.com/matestack/matestack-ui-core/issues/343#issuecomment-581149092
//
environment.config.set("output.filename", chunkData => {
  return "[name].js"
})

// Remove the digest from the output css filename.
// https://github.com/matestack/matestack-ui-core/issues/343#issuecomment-581149092
//
// Inspect with:
//
//     console.log(environment.plugins)
//
const miniCssExtractPlugin = environment.plugins.get('MiniCssExtract')
miniCssExtractPlugin.options.filename = "[name].css"

module.exports = environment

const { environment } = require('@rails/webpacker')
const vue =  require('./loaders/vue')

const customConfig = require('./custom')
// Merge custom config
environment.config.merge(customConfig)

environment.loaders.append('vue', vue)


// // Set nested object prop using path notation
// environment.config.set('resolve.extensions', ['.foo', '.bar'])
// environment.config.set('output.filename', '[name].js')
// // Delete a property
// environment.config.delete('output.chunkFilename')

module.exports = environment

var path = require('path')
const { environment } = require('@rails/webpacker')

const NonDigestPlugin = require('non-digest-webpack-plugin');

const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')


environment.config.merge({
  resolve: {
    alias: {
      react: path.resolve('./node_modules/react')
    }
  }
})

// run this with 
if(process.env.ANALIZE_BUNDLE === 'true' && 
  process.env.NODE_ENV === 'production'){
  environment.plugins.append(
    'BundleAnalyzer',
    new BundleAnalyzerPlugin()
  )
}

const { environment } = require('@rails/webpacker')
const { VueLoaderPlugin } = require('vue-loader')
const vue = require('./loaders/vue')

environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())
environment.loaders.prepend('vue', vue)

// based on https://github.com/webpack/webpack/tree/master/examples/common-chunk-and-vendor-chunk
// let's use chunks just for vendor for now
environment.config.merge({
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /node_modules/,
          chunks: "initial",
          name: "vendor",
          priority: 10,
          enforce: true
        }
      }
    }
  },
})

module.exports = environment

const { environment } = require('@rails/webpacker')
const { resolve } = require('path');

environment.config.merge({
  resolve: {
    extensions: ['.js', '.jsx', '.css', '.scss'],
    alias: {
      libs: resolve('app/javascript/packs/libs')
    }
  },
  entry: {
    'vendor-bundle': [
      '@babel/polyfill'
    ],
    // 'app-bundle': [
    //   resolve('app/javascript/react/bundles/Room/containers/Room'),
    // ]
  },
})

const { environment } = require('@rails/webpacker')
const webpack = require('webpack')

environment.plugins.prepend(
  'Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    jquery: 'jquery',
    'window.jQuery': 'jquery'
  })
)

environment.config.merge({
  module: {
    rules: [{
      test: require.resolve('jquery'),
      use: [{
        loader: 'expose-loader',
        options: 'jQuery'
      },{
        loader: 'expose-loader',
        options: '$'
      }]
    }]
  }
})

module.exports = environment

const { environment } = require("@rails/webpacker");
const path = require("path");

function resolvePath(relPath) {
  return path.resolve(__dirname, "..", "..", relPath);
}

environment.splitChunks();
environment.loaders.delete("nodeModules");
environment.config.merge({
  resolve: {
    alias: {
      __generated__: resolvePath("app/javascripts/__generated__"),
    },
  },
});
module.exports = environment;

const { environment } = require('@rails/webpacker')
const { VueLoaderPlugin } = require('vue-loader')
const vue = require('./loaders/vue')

const resolveAliases = require('./resolve_aliases')

environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())
environment.loaders.prepend('vue', vue)
environment.config.merge(resolveAliases)

module.exports = environment

const PnpWebpackPlugin = require('pnp-webpack-plugin')
const { environment } = require('@rails/webpacker')
const { VueLoaderPlugin } = require('vue-loader')
const vue = require('./loaders/vue')
const path = require('path');

environment.config.resolve.alias = {
  'jquery': 'backbone.native',
  '@blitz': path.resolve(__dirname, '../../app/javascript'),
}

environment.loaders.append('typescript', {
  test: /\.tsx?(\.erb)?$/,
  use: [
    {
      loader: 'ts-loader',
      options: PnpWebpackPlugin.tsLoaderOptions({
        appendTsSuffixTo: [/\.vue$/]
      }),
    }
  ]
})

const { environment } = require('@rails/webpacker')
const { VueLoaderPlugin } = require('vue-loader')
const vue = require('./loaders/vue')

const path = require('path')
environment.config.merge({
  resolve: {
    alias: {
      '@': path.resolve('app/javascript'),
      vue$: 'vue/dist/vue.runtime.esm.js',
    },
  },
})

environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())
environment.loaders.prepend('vue', vue)
module.exports = environment