I have a .ts
file that contains a function, and I want to compile this file into .js
file via webpack to be loaded in index.html
.
I need this function to be globally available in index.html
index.html
<script src="./myfile.js"></scrit>
<script>
console.log(myfunction);
// ----> error: myfunction is not defined
</scrit>
<script type="module">
import myfunction from './myfile'
console.log({myfunction})
// ----> error: requested module './myfile.js' does not provide an export named 'myfunction'
</script>
myfile.ts
export myfunction = function(){}
webpack.config
{
mode: 'development',
devtool: false,
target: [ 'web', 'es5' ],
profile: false,
resolve: {
roots: [Array],
extensions: [Array],
symlinks: false,
modules: [Array],
mainFields: [Array],
plugins: [Array],
alias: [Object]
},
resolveLoader: { symlinks: true, modules: [Array] },
context: '/home/sh_eldeeb_2010/@eng-dibo/dibo/projects/ngx-cms',
entry: {
main: [Array],
'polyfills-es5': [Array],
polyfills: [Array],
styles: [Array],
scripts: './scripts.ts'
},
output: {
clean: true,
path: './dist',
publicPath: '',
filename: '[name].js',
chunkFilename: '[name]-es2015.js',
crossOriginLoading: false,
trustedTypes: 'angular#bundler',
library: undefined,
libraryTarget: 'commonjs2'
},
watch: false,
watchOptions: { poll: undefined, ignored: '**/$_lazy_route_resources' },
performance: { hints: false },
ignoreWarnings: [
/System.import() is deprecated and will be removed soon/i,
/Failed to parse source map from/,
/Add postcss as project dependency/
],
module: {
strictExportPresence: true,
rules: [Array],
noParse: //native-require.js$/
},
experiments: { syncWebAssembly: true, asyncWebAssembly: true },
cache: false,
optimization: {
minimizer: [Array],
moduleIds: 'deterministic',
chunkIds: 'deterministic',
emitOnErrors: false,
runtimeChunk: 'single',
splitChunks: [Object]
},
plugins: [
[ContextReplacementPlugin],
[DedupeModuleResolvePlugin],
[ProgressPlugin],
[LicenseWebpackPlugin],
[CommonJsUsageWarnPlugin],
[AnyComponentStyleBudgetChecker],
[Object],
[MiniCssExtractPlugin],
SuppressExtractedTextChunksWebpackPlugin {},
[NgBuildAnalyticsPlugin],
[AngularWebpackPlugin],
[FilterErrors]
],
node: false,
stats: {
all: false,
colors: true,
hash: true,
timings: true,
chunks: true,
builtAt: true,
warnings: true,
errors: true,
assets: true,
cachedAssets: true,
ids: true,
entrypoints: true
},
externals: []
},
entry: {
myfile: './myfile.ts'
}
}