How to bring plugins into global scope in webpack?

Question

css

I'm trying to bring plugins into the global scope via providePlugin, but it doesn't work. It displays everything in index.js, but if I access plugins from other files, I don't see the plugins.

// index.js 
console.log($) - это выведет
import './item.js';

// item.js 
console.log($) -уже не видит

const path = require('path');
const webpack = require('webpack');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const autoprefixer = require('autoprefixer');

const isDev = process.env.NODE_ENV === 'development'
const isProd = !isDev

const plugins = () => {
    const base = [
        new CleanWebpackPlugin(),
        new MiniCssExtractPlugin({
            filename: '[name].bundle.css',
        }),
        new webpack.ProvidePlugin({
            'window.jQuery': 'jquery',
            'window.$': 'jquery',
            jQuery: 'jquery',
            $: 'jquery',
            'window.Swiper': 'swiper',
            Swiper: 'swiper',
        }),
    ]

    return base;
}

module.exports = {
    mode: 'development',
    entry: ["./js/index.js", "./scss/template.scss"],
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    optimization: {
        splitChunks: {
            chunks: 'all',
            name: 'vendor'
        }
    },
    devtool: isDev ? 'source-map' : false,
    plugins: plugins(),
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['css-loader']
            },
            {
                test: /\.(sass|scss)$/,
                include: path.resolve(__dirname, "./scss"),
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {},
                    },
                    {
                        loader: "css-loader",
                        options: {
                            sourceMap: true,
                            url: false,
                        },
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            sourceMap: true,
                            postcssOptions: {
                                config: path.resolve(__dirname, 'postcss.config.js'),
                            }
                        }
                    },
                    {
                        loader: "sass-loader",
                        options: {
                            sourceMap: true,
                        },
                    },
                ],
            },
            {
                test: /\.m?js$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
        ]
    }
}

Answer 1

See the border-image property set.
Examples:
https://codepen.io/tracilynn/pen/vKqNkO
https://codepen.io/dudleystorey/pen/yyZpeX
(try changing block size)