Bootstrap in webpack 4?

Question

Bootstrap

In order to make the question clear, I will briefly explain one point. I ask you to pay attention to it. Please read the comments...
I've noticed one peculiarity related to the inclusion of bootstrap CSS styles. Depending on how you include them, via webpack import or CDN, bootstrap will either override or NOT override CSS
Option #1: Importing via CDN
When importing with it, our (custom) styles are paramount. They easily interrupt the bootstrap ones. And what's important! Bootstrap styles are not in final css file!
Option #2: Import with webpack
I think that everyone understands that in this case, bootstrap styles are imported using the entry point (index.js) code: import 'bootstrap/dist/css/bootstrap.min.css';
And in this case, in the final CSS file, we will see the bootstrap styles as well:

And because they are below the custom styles, they overwrite them.
Hence my question, what to do? If you use CDN import, do you need to download bootstrap to the node_modules folder? But I don’t really like this option, since many libraries refuse CDN and I suggest npm as an installation. What if the same thing happened to bootstrap? That's why I want to find an import solution with webpack. Let me remind you that the final file is generated by webpack. I can't manually move the bootstrap code to the top and custom to the bottom)) That's why I have a question for you! What is the right thing to do in this situation so that bootstrap does NOT overwrite custom styles? Can you take bootstrap into a separate file in the dist folder and simply import it into style.css in the same folder? If so, please help with setting up webpack.config.js
Mine is written like this:

const path = require('path')
const HTMLPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  optimization: {
    minimizer: [
      new OptimizeCssAssetsPlugin({}),
      new UglifyJsPlugin({})
    ]
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    port: 4200
  },
  plugins: [
    new HTMLPlugin({
      filename: 'index.html',
      template: './src/index.html'
    }),
    new MiniCssExtractPlugin({
      filename: 'style.css'
    })
  ],
  resolve: {
    extensions: ['.js', '.ts']
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      },
       {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader']
      },
   //   {
        
        //test: /\.(png|jpe?g|gif)$/i,
      //  use: [
        //  {
         // loader:'file-loader',
         // options:{
         //   name:'[name].[ext]',
         //   outputPath:'./',
          //  useRelativePath:true
         //   }
        //  }
       // ]
     // },
      
     
      { 
        test: /\.(js|ts)$/, 
        exclude: /node_modules/, 
        loader: "babel-loader" 
      }
    ]
  }
}
P.S. Я заранее прошу прошения за то, что не смогу вам сразу ответить. Я на несколько часов должен отойти... Но я прошу вас написать мне, ваш вариант выхода их ситуации. Мне важно каждое мнение. Спасибо!