How do I expose a javascript module's default export object with Webpack 4?

Question

I have a javascript es6 module that exports an object as follows:

import HealthCarePlan from './health_care_plan/health-care-plan';
import CourseRequest from './course_request/course-request';

export default {
    CourseRequest: CourseRequest,
    HealthCarePlan: HealthCarePlan
};

How can I tell webpack to export that object to a global variable called appScripts? I want to be able to reference appScripts.CourseRequest and appScripts.HealthCarePlan from the global context.

Here's my current webpack (split into common, dev.babel, and dev.include modules):

index.js

export default {
    one: 'one',
    two: 'two'
}

webpack.common.babel.js

import path from 'path';
import webpack from 'webpack';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import webpackRxjsExternals from 'webpack-rxjs-externals';

const appsPath = 'powerschool_apps';
const staticPath = `${appsPath}/static`;

const config = {
    target: 'web',
    node: {
        fs: 'empty'
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'static/bundles'),
        publicPath: 'http://localhost:8081/',
        library: 'app',
        libraryTarget: 'var'
    },
    entry: {
        app: [
            './powerschool_apps/static/js/index.js'
        ],
        vendor: [
            'jquery',
            `./${staticPath}/js/vendor-include.js`,
            `./${staticPath}/lib/materialize/js/bin/materialize.js`,
            'iframe-resizer',
            'underscore',
            `./${staticPath}/lib/materialize/sass/materialize.scss`,
        ]
    },
    performance: {
        hints: false
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                default: false,
                commons: {
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendor_app',
                    chunks: 'all',
                    minChunks: 2
                }
            }
        }
    },
    externals: [
        webpackRxjsExternals()
    ],
    module: {
        rules: [
            {
                test: /\.(ttf|eot|woff|woff2)/,
                loader: 'file-loader',
                options: {
                    name: 'fonts/[name].[ext]',
                }
            },
            {
                test: /\.(png|svg|gif)$/,
                loader:
                    'file-loader',
                options: {
                    name: 'images/[name].[ext]',
                },
            },
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            },
        ]
    },
    plugins: [
        // new HardSourceWebpackPlugin(),
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery',
        }),
    ],
    resolve: {
        modules: [
            '/node_modules'
        ]
    }
};

export default config;

webpack.dev.babel.js

require('babel-register');
import path from 'path';
import webpack from 'webpack';
import merge from 'webpack-merge';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';

import common from './webpack.common.babel';

export default merge(common, {
    devtool: 'inline-source-map',
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    'css-hot-loader',
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader'
                ]
            },
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].bundle.css',
            chunkFilename: '[id].css'
        }),
        new webpack.NamedModulesPlugin()
    ],
    serve: {
        dev: {
            headers: {
                'Access-Control-Allow-Origin': '*'
            }
        },
        host: '0.0.0.0',
        port: '8081',
        clipboard: false,
        hot: {
            port: '8500',
            host: {
                client: 'localhost',
                server: '0.0.0.0'
            }
        }
    }
});

webpack.dev.include.js

require('babel-register');

const config = require('./webpack.dev.babel');

module.exports = config.default;

webpack.prod.babel.js

import path from 'path';
import merge from 'webpack-merge';
import CleanWebpackPlugin from 'clean-webpack-plugin';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import BundleTracker from 'webpack-bundle-tracker';

import common from './webpack.common.babel';

export default merge(common, {
    mode: 'production',
    output: {
        filename: '[name].[hash].js',
        path: path.resolve(__dirname, 'static/bundles'),
        publicPath: 'http://localhost:8081/static/bundles/'
    },
    module: {
        rules: [{
            test: /\.(css|scss|sass)$/,
            use: [
                MiniCssExtractPlugin.loader,
                'css-loader',
                'sass-loader'
            ]
        }],
    },
    plugins: [
        new CleanWebpackPlugin(['./powerschool_apps/static/bundles/*']),
        new BundleTracker({
            filename: './webpack-stats.json'
        }),
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename: '[name].[hash].css',
            chunkFilename: '[id].css'
        }),
    ]
})

package.json dependencies

"dependencies": {
  "@reactivex/rxjs": "^6.0.0",
  "bootstrap": "^4.0.0",
  "bootstrap-markdown": "^2.10.0",
  "font-awesome": "^4.7.0",
  "font-awesome-animation": "^0.2.0",
  "gulp": "gulpjs/gulp.git#4.0",
  "hammerjs": "^2.0.8",
  "iframe-resizer": "^3.5.16",
  "jquery": "^3.3.1",
  "jquery-datetimepicker": "^2.5.16",
  "jquery.formset": "^1.3.0",
  "ladda": "^1.0.5",
  "materialize-autocomplete": "^1.0.7",
  "rx-dom": "^7.0.3",
  "select2": "^4.0.6-rc.1",
  "underscore": "^1.8.3"
},
"devDependencies": {
  "babel-core": "^6.26.0",
  "babel-loader": "^7.1.2",
  "babel-preset-env": "^1.6.1",
  "babel-preset-es2015": "^6.24.1",
  "babel-preset-stage-0": "^6.24.1",
  "browser-sync": "^2.23.7",
  "clean-webpack-plugin": "^0.1.19",
  "css-hot-loader": "^1.3.9",
  "css-loader": "^0.28.11",
  "file-loader": "^1.1.11",
  "merge-stream": "^1.0.1",
  "mini-css-extract-plugin": "^0.4.0",
  "normalize-package-data": "^2.4.0",
  "run-sequence": "^2.2.1",
  "sass-loader": "^7.0.1",
  "source-map-loader": "^0.2.3",
  "style-loader": "^0.21.0",
  "webpack": "^4.6.0",
  "webpack-bundle-tracker": "^0.3.0",
  "webpack-cli": "^2.0.15",
  "webpack-hot-client": "^2.2.2",
  "webpack-merge": "^4.1.2",
  "webpack-rxjs-externals": "^2.0.0",
  "webpack-stream": "^4.0.0"
},

I'm starting webpack-serve with: webpack-serve --config webpack.dev.include.js. In Chrome DevTools, when I open the Console and type in app and hit enter, I get undefined.

However, when I run webpack --config webpack.prod.babel.js and type in app in the DevTools console, I get back the {one: 'one', two: 'two'} object.

My goal here is to use this bundle in a Django project. I need to pass in data from the Django context into a JS function, which is why I need to expose the bundle as a library.

Answer 1

You can use ProvidePlugin in order to do so. At first you need to make alias for the file you want to be global

resolve: {
  alias: {
    appScripts: '/path-to-app-scripts-file'
  }
}

And add the ProvidePlugin

new webpack.ProvidePlugin({
  appScripts: ['appScripts', 'default']
})

Now, whenever you use global appScripts variable, it uses default export from appScripts module, which is aliased to the specified file.