Symfony Webpack Encore ReferenceError：函数未定义

Question

I'm using Webpack Encore in my Symfony 4 application. Now issue is that my required js file is not working. Below is the code

webpack.config.js

const Encore = require('@symfony/webpack-encore');

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')   
    .addEntry('app', './entry/app.js')

    .enableSingleRuntimeChunk()
    .cleanupOutputBeforeBuild()
    .enableSourceMaps(!Encore.isProduction())   
    .enableVersioning(Encore.isProduction())   
;

module.exports = Encore.getWebpackConfig();

app.js

require('../public/assets/js/custom/common.js');
require('../public/assets/js/page1.js');

common.js

function showLoader() {
    //....
}

function hideLoader() {
    //....
}

.......

page1.js

....
showLoader();

and when I use my app.js file in my html and run the page then it throws an error in console

page1.js:1 Uncaught ReferenceError: showLoader is not defined
    at Object../public/assets/js/page1.js (page1.js:1)
    at __webpack_require__ (bootstrap:79)
    at Object../entry/app.js (app.js:2)
    at __webpack_require__ (bootstrap:79)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at app.js?version=10:1

I do not want to use module.exports as my common.js has 50+ functions