Aquí está mi 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 está construyendo los dos módulos js main.js y msal.js y aplica las siguientes etiquetas en index.html: <script src="main.js"></script><script src="msal.js"></script>
Dentro de auth.js hay una función llamada SignIn(), y cuando hago algo como: <body onLoad='SignIn()'> me dice que SignIn no está definido. Tengo muchas dificultades con este paquete web. Empiezo a preguntarme si vale la pena.
Con su configuración actual, Webpack empaquetará el código JavaScript de tal manera que ninguna de las variables de ámbito raíz dentro del código estará disponible en el ámbito global de la página a menos que se declare explícitamente. Para un ejemplo simple de esto, considere un auth.js simple:
window.accessible = () => { // … }; const inaccessible = () => { // … } Aquí, accessible se define explícitamente en el ámbito global de la página, asignándolo a la window . Podrá hacer onload="accessible()" y funcionará. Por otro lado, inaccessible() se define tal cual en el script y Webpack asumirá que solo se puede acceder a él dentro de este archivo. Además, si ningún otro código llama a inaccessible() , puede eliminarse por completo del código incluido debido a la optimización del movimiento del árbol .
Entonces, para extender esto a su situación, asegúrese de que la función SignIn() esté explícitamente adjunta a un alcance global, algunos ejemplos:
window.SignIn = () => { // … }; // OR window.SignIn = function () { // … }; // OR window.SignIn = function SignIn() { // … }; // Et cetera