Use Code in Script Tag from a Webpack / Library / Bundle

JavaScript
#1

Hello,
I’ve started using webpack to bundle my js and sc ss. Currently I’m bundling the js and scss fine but I can’t seem to use any JS functions or JS classes in a script tag.

Both files are output into the /static/ folder, I’ve checked this by deleting the files in there and they get recreated. I’m sure there is the ProjectLibrary.js file in a script tag in the HTML! I’ve installed all the modules needed. No errors coming up in console until I try to access the library.

As a specific example I need to use the line bulmaCollapsible.attach(); line but I need to use it in a tag in the webpage. I can’t use it within the Bundle / Library.js .

What changes to I need to make to be able to access the classes functions in my .js files?

// webpack.config.js
const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const postcssPresetEnv = require("postcss-preset-env");

module.exports = {
    entry: [
        './templates/js/ProjectLibrary.js',
        './templates/scss/ProjectStyles.scss'
    ],
    output: {
        path: path.resolve(__dirname, 'static/js'),
        filename: ‘ProjectLibrary.js',
        library: ‘ProjectLibrary’,
        libraryTarget: 'umd'
    },
    module: {
        rules: [
            {
                test: /\.s(a|c)ss$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader
                    },
                    {
                        loader: "css-loader",
                        options: {
                            importLoaders: 2
                        }
                    },
                    {
                        loader: "postcss-loader",
                        options: {
                            ident: "postcss"
                    	},
		   },
                    {
                        loader: "sass-loader"
                    }
                ]
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: '/node_modules/'
            }
        ]
    },
    devServer: {
         contentBase: './templates',
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "../../static/css/ProjectStyles.css"
        })
    ],
    externals: {
        $: 'jQuery',
        jQuery: 'jQuery',
    },
};

// MyLibrary.js
import bulmaCollapsible from '@creativebulma/bulma-collapsible';

import projectTabs from './tabs.js';
#2