calling Typescript method in MVC5 cshtml file, bundled using webpack

Question

Just starting with webpack, and I'm having trouble combining some MVC features with webpack AND typescript. See below for my code combinations:

webpack.config.js:

var wbConfigEntries = {
    "jqkendoMain": [
        paths.appjs + "main.ts"
    ]
};

module.exports = {
    devtool: 'source-map',
    entry: wbConfigEntries,
    target: 'web',
    output: {
        path: paths.dist, 
        publicPath: './',
        filename: outputFile,
        library: "[name]",
        libraryTarget: "umd",
        umdNamedDefine: true
    },
....

main.ts:

import * as $ from 'jquery';
import * as bootstrap from 'bootstrap';
import '../node_modules/@progress/kendo-ui/js/kendo.web';
import '../node_modules/@progress/kendo-ui/js/kendo.aspnetmvc';
import '../node_modules/bootstrap/dist/css/bootstrap.css';
import '../node_modules/bootstrap/dist/css/bootstrap-theme.css';
import '../node_modules/font-awesome/css/font-awesome.css';
import '../node_modules/@progress/kendo-ui/css/web/kendo.common.css';

export default class Main {
    private _name = '';

    constructor(name: string) {
        this._name = name;
    }

    TestFunc() {
        console.log(this._name);
    }
}

_layout.cshtml:

...

    var mn = new jqkendoMain.Main('@WebpackMVC5App.Helpers.WebConfigSettings.RandomWebConfigValue');
    mn.TestFunc();

...

I know I'm including several imports that i don't need (yet) in main.ts, but i'm using this as a test case to update some legacy code. Basically my goal is to be able to compile/bundle all of the typescript, and then pass to the typescript some values from an MVC5 static class. I'm looking to call some of the bundled functions FROM my .cshtml files, but i'm not seeing how to do that. I'm getting that jqkendoMain is undefined, or jqkendoMain.Main is undefined or whatever. Any ideas on what i'm missing?

Above is just samples of the code i'm trying out, you can see the actual code in it's entirety at https://github.com/vishnu4/WebpackMVC5 .

user_434437 · Answer

This works for me !

const path = require('path');

module.exports = 
{
    entry: {
        default: './src/default.js' // or whereever you put your entry(s)
    },
    mode: 'development',
    devServer: {
        contentBase: './dist'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
        library: 'YourNamespace',
        libraryTarget: "umd"
    }
    // ...
}

// default.js
import { YourClass } from './yourclass'
export { YourClass } 

// yourclass.ts
export class YourClass { constructor() { console.log('hello!'); }   

C:> webpack --watch 

// _Layout.cshtml

calling Typescript method in MVC5 cshtml file, bundled using webpack

2 Answers