Как подключать в header cdn jquery или bootstrap и другие библеотеки?

Question

[hollanditkzn]

Я встал в ступор по поводу как вообще подключать библеотеки cdn в webpack
по документации я понял что https://webpack.js.org/configuration/externals/ extends установить и в документации описано только на файл js и не понятно допустим bootstrap или materialize где есть css и js файлы типо омечать префиксом и второй момент как путь у cdn определять для сокращение
в webpack

const path = require('path');
module.exports = {
    entry: './src/header.js',
    output: {
        path: path.resolve(__dirname, 'public'),
        filename: 'bundle.js',
    },
    module: {
        rules: [
            {
                test: /\.jsx$/,
                loader: 'babel-loader',
                exclude: /\/node_module\//
            },
        ]
    },
    devtool: 'source-map',
    context: __dirname,
    watch: true,
    watchOptions: {
        aggregateTimeout: 300
    }
};

Не знаю нужно или нет эту конфигурацию
в src/header.js

import templaet from 'header.pug';

class Header{
    constructor(name, path, typeCDN){
        this.name = name;
        this.path = path;
        this.type = typeCDN;
    }
}
let arr = [];
/** Попробовал так */
let jquery = new Header('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js', 'js');
let materializeCss = new Header('materialize-js', 'https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js', 'js');
let materializeJs = new Header('materialize-css', 'https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css', 'css');
let icon = new Header('materialize-icon', 'https://fonts.googleapis.com/icon?family=Material+Icons', 'css');

arr.push(jquery, materializeCss, materializeJs, icon);
console.log(arr);

Просто не доконца не понимаю как все подключать эти настройки или это только действует к подключение компонентам?