Even though I may be a bit tardy to the celebration, I still wanted to share my insights in case someone stumbles upon this post via Google.

When dealing with a jQuery Plugin like FullCalendar through Webpack, it's essential to ensure that jQuery is accessible in the global namespace before the plugin can be utilized through require/import.

This is how I set up my webpack.config.js:

var webpack = require("webpack")
var path = require("path")
var ExtractTextPlugin = require("extract-text-webpack-plugin")
var HtmlWebpackPlugin = require("html-webpack-plugin")

module.exports = {
    entry: {
        app: "./index.js",
        vendor: [
            "jquery",
            "moment",
            "fullcalendar"
        ]
    },
    output: {
        path: path.join(__dirname, '../../public'),
        publicPath: '/',
        filename: "scripts/app.[chunkhash].js"
    },
    module: {
        loaders: [
            { test: /\.css$/, loader: ExtractTextPlugin.extract("style", ["css"]) },
            { test: require.resolve('jquery'), loader: 'expose?$!expose?jQuery' },
            { test: require.resolve('moment'), loader: 'expose?moment' }
        ]
    },
    resolve: {
      alias: {
        jquery: path.resolve(path.join(__dirname, '../..', 'node_modules', 'jquery')),
        fullcalendar: 'fullcalendar/dist/fullcalendar'
      }
    },
    plugins: [
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.CommonsChunkPlugin({ names: ["vendor"], filename: "scripts/[name].[chunkhash].js" }),
        new ExtractTextPlugin("styles/[name].[chunkhash].css"),
        new HtmlWebpackPlugin({
            template: "index.html.handlebars"
        }),
        new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/) 
    ]
};

The crucial part is where jQuery and moment are exposed to the global namespace using the loader: 'expose?$!expose?jQuery' syntax.

Additionally, since FullCalendar packaging doesn't automatically integrate with the require function, I created an alias for easier usage:

alias: { fullcalendar: 'fullcalendar/dist/fullcalendar' }

With these setups, loading FullCalendar via require/import becomes seamless and straightforward.

As for styles, no aliases were established yet, so a relative reference to the CSS file was implemented:

@import "../../../node_modules/fullcalendar/dist/fullcalendar.css";

You also have the option to substitute fullcalendar.js with fullcalendar.min.js to skip re-compression. However, bundling all vendor JS files together might lead to better compression results. (Same applies to CSS files - fullcalendar.css with fullcalendar.min.css)

Disclaimer: While I'm not certain if this method is deemed as the "correct" approach, after some trial and error with webpack, this setup proved to make working with jQuery plugins such as FullCalendar and Select2 more manageable.

For further reference, links to relevant files in a public repository that follow this pattern:

webpack.config.js: https://github.com/thegrandpoobah/mftk-back-office/blob/e531de0a94130d6e9634ba5ab547a3e4d41c5c5f/app/src/public/webpack.config.js

Style SCSS: https://github.com/thegrandpoobah/mftk-back-office/blob/e531de0a94130d6e9634ba5ab547a3e4d41c5c5f/app/src/public/styles/main.scss

Module utilizing FullCalendar: https://github.com/thegrandpoobah/mftk-back-office/blob/e531de0a94130d6e9634ba5ab547a3e4d41c5c5f/app/src/public/students/index.js#L277

Here is a detailed guide on how to set up your project using information from various sources. Start by ensuring that you have moment.js properly installed:

npm install moment

Next, make sure you have the fullcalendar version 3.10.2 installed, which is the latest in the version 3 series. This version is optimized to not bundle jQuery or moment.js. Even though it's not the most recent version, it uses the old syntax to maintain compatibility with legacy code:

npm install <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aaccdfc6c6c9cbc6cfc4cecbd8ea99849b9a8498">[email protected]</a>

Then, proceed to install script-loader:

npm install --save-dev script-loader

If you are working with Laravel, add the following lines below bootstrap and jquery in resources/js/bootstrap.js (note the use of script-loader):

window.moment = require('moment');
require('script-loader!fullcalendar/dist/fullcalendar');
require('script-loader!fullcalendar/dist/locale-all');

Include the CSS styles in resources/sass/app.scss:

@import '~fullcalendar/dist/fullcalendar.min.css';

Finally, run the development build command:

npm run dev

For production, use:

npm run prod

And that's all there is to it!

I have discovered a simpler solution that worked for us.

In our project, we were using fullcalendar along with scheduler and transitioning from Rails sprockets to webpack. When we added fullcalendar to a lazyloaded chunk in webpack, it unexpectedly brought in two extra versions of moments and jquerys (yes, two), overriding our configuration changes made in the original version located in our vendor file.

Our goal was to include fullcalendar without any module processing, which turned out to be unnecessary anyway. Thankfully, webpack's script-loader came in handy for this task.

require('script-loader!fullcalendar/dist/fullcalendar.js')

Once you add this line, fullcalendar is included as desired, free from any additional processing. The same can be applied to the scheduler plugin for jquery.

To resolve the issue with webpack 5, you can use the following code:

module: {
        rules: [
            {
                test: require.resolve('jquery'),
                    loader: 'expose-loader',
                    options:  { 
                        exposes: ["$", "jQuery"]
                    }
            },
            {
                test: require.resolve('moment'),
                    loader: 'expose-loader',
                    options:  { 
                        exposes: "moment"
                    }
            },
            {
                test: require.resolve('fullcalendar'),
                use: [
                    {
                      loader: 'script-loader',
                      options: 'fullcalendar/dist/fullcalendar.js'
                    }
                  ]
            },
            {
                test: require.resolve('fullcalendar-scheduler'),
                use: [
                    {
                      loader: 'script-loader',
                      options: 'fullcalendar/dist/fullcalendar-scheduler.js'
                    }
                  ]
            },
        ]
    },