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.
import {v} from './core.js';
Generates an error when loading the page: Uncaught SyntaxError: import not found: v for the line above.
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...