Can not access defined exports from the webpack bundle?


I'm trying to compose a webpack bundle from existing js files and use exports from that in both other JS files and occasionally in html script tag. Later add babel to transpile the whole thing to es5, hence commented out section with babel and ts, that btw works fine. For now I am having a problem with the exports using straight webpack.

Webpack config as as follows:

var path = require('path');
const { updateCommaList } = require('typescript');

module.exports = {
    entry: {
        'core' : [
        './src/utils.js',
        './src/zdlg.js'
        ]
    },
    devtool: 'source-map',
    stats: 'verbose',
    resolve: {
      modules: ['node_modules']
    },
    resolveLoader: {
      extensions: ['.ts', '.tsx'],
      mainFields: ['loader', 'main']
    },
    output: {
      filename: '[name].js',
      library: "LIB",
      libraryTarget: 'var',
      path: path.resolve(__dirname, "dist")
    },
    module: {
     }
  };

I can bundle files, no errors there. I'm exporting functions using export statement like so:

export function v ...

And in the html file I have

<script src="./core.js"></script>
<script type="module" src="./io.js"></script>

After tinkering for last few days I've figured out couple things.

  1. If I have a single file in the entry section for core object, exports work, in that the LIB variable has property for each exported function and I can call LIB.v() fine.
  2. imports do not work anyway, i.e. io.js import:
import {v} from './core.js';

Generates an error when loading the page: Uncaught SyntaxError: import not found: v for the line above.

  1. Adding second file to entry causes webpack to override exports from the 1st file. The reason I didn't see any exports initially was that zdlg.js wasn't exporting anything, and LIB had no exports. If zdlg.js exports any functions they are the only ones that show up on the LIB.

So, in the end, I can export functions from a single file, but I thought the whole purpose of the webpack was to allow to compose modules from multiple files.

I'm not sure what am I missing or where I am going wrong, should be very basic stuff...

In case it is important, here's dev dep list too:

  "devDependencies": {
    "@babel/core": "^7.8.7",
    "@babel/preset-env": "^7.8.7",
    "babel-loader": "^8.0.6",
    "install": "^0.13.0",
    "npm": "^6.14.7",
    "ts-loader": "^6.2.1",
    "typescript": "^3.8.3",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-middleware": "^3.7.2",
    "webpack-dev-server": "^3.11.0",
    "webpack-merge": "^5.0.9"
  }


Made it work, although not sure if this is the best way.

Basically, instead of adding multiple entries in the export's entry section, I've created index.js file which reexported all the exports from the files I needed:

require('./src/ut');
require('./src/zd');

export * from './src/ut';
export * from './src/zd'

Entry is now just index.js

entry: {
        'core' : 'index.js'
    },

Works as intended, but I am not sure why wouldn't webpack automate this, and why would I have to export everything myself...