Javascript modules built by webpack not usable in HTML

Question

Here is my webpack.config.js:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  entry: {
    main: [
      path.resolve(__dirname, 'src/js/app.js'),
      path.resolve(__dirname, 'src/js/api.js'),
      path.resolve(__dirname, 'src/js/auth.js')
    ],
    msal: [ path.resolve(__dirname, 'src/js/msal-2.28.1.js') ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/html/index.html',
      inject: 'body',
      scriptLoading: 'blocking'
    }),
  ],
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true
  },
  optimization: {
    minimize: true,
    minimizer: [
      new TerserPlugin({
        extractComments: false,
        terserOptions: {
          format: {
            comments: false,
          },
        },
      }),
    ]
  },
  devServer: {
    static: path.resolve(__dirname, 'dist'),
    port: 3000,
    hot: true
  },
  module: {
    rules: [
      {
        test: /\.(scss)$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: () => [
                  require('autoprefixer')
                ]
              }
            }
          },
          {
            loader: 'sass-loader'
          }
        ]
      }
    ]
  }
}

Webpack is building the two js modules main.js and msal.js and it applies the following tags into the index.html: <script src="main.js"></script><script src="msal.js"></script>

Inside auth.js is a function called SignIn(), and when I do something like: <body onLoad='SignIn()'> it tells me that SignIn is undefined. I am having a lot of difficulties with this webpack I'm starting to wonder if it's worth the bother.

Hello, can you post your generated html file to see how webpack is making scripts orders ? — sohaieb azaiez, Aug 06 '22 at 10:34
maybe this will help: https://stackoverflow.com/questions/37656592/define-global-variable-with-webpack — raz-ezra, Aug 06 '22 at 11:11
@sohaiebazaiez I tried with webpack putting the script tags in both the header and after the body. The issue seems to be that it's not actually writing my functions into the bundle. — yppaL, Aug 06 '22 at 12:09
@raz-ezra nah that's for making the JS available in other JS. I'm trying to use it from the HTML. — yppaL, Aug 06 '22 at 12:11

score 1 · Accepted Answer · answered Aug 06 '22 at 14:17

With your current configuration, Webpack will bundle the JavaScript code in such a way that none of the root-scoped variables inside the code will be available in the global scope of the page unless explicitly declared so. For a simple example of this, consider a simple auth.js:

window.accessible = () => {
  // …
};

const inaccessible = () => {
  // …
}

Here, accessible is explicitly defined onto the global scope of the page, by assigning it to window. You will be able to do onload="accessible()" and it will work. On the other hand, inaccessible() is defined as-is in the script and Webpack will assume this to be only accessible within this file. Also, if no other code calls inaccessible(), it may be removed entirely from the bundled code because of the tree-shaking optimization.

So to extend this for your situation, ensure that the SignIn() function is explicitly attached to a global scope, some examples:

window.SignIn = () => {
  // …
};

// OR

window.SignIn = function () {
  // …
};

// OR

window.SignIn = function SignIn() {
  // …
};

// Et cetera

Thanks yes that alligns exactly with what I am seeing, as it deems the code to be scoped locally, it is not even making it into the bundle as it assumes it is dead code. I think webpack is overkill for what I'm doing so I've moved away from it now. However I'll mark this as the answer as I do think it is exactly as you say. — yppaL, Aug 06 '22 at 14:19

Javascript modules built by webpack not usable in HTML

1 Answers1