Javascript modules built by webpack not usable in HTML-CodePudding

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 onl oad='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.

CodePudding user response：

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