WebPack output.library.type var is undefined

Question

I am learning WebPack with a shortcode. In the code, we are trying to calculate the cube and square. They will suppose to store in a variable as per the following webpack.config.js.

    const webpack = require('webpack');
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const isDevelopment = process.env.NODE_ENV === 'development';

const config = {
    entry: './src/index.ts',
    output: {
        path: path.resolve(__dirname, 'dist'),
        library: {
            type: 'var',
            name: 'testVar'
        },
        filename: '[name].js'
    },
    mode: 'production',
    plugins: [

        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename: "[name].css",
            chunkFilename: "[id].css",
        }),
        new webpack.optimize.LimitChunkCountPlugin({
            maxChunks: 1,
        }),

        new HtmlWebpackPlugin({
            hash: true,
            title: 'Video Player Play Ground',
            myPageHeader: 'Sample Video Player',
            template: './src/index.html',
            filename: 'index.html'
        })
    ],
    module: {
        rules: [
            {
                test: /\.s[ac]ss$/i,
                exclude: /node_modules/,

                use: [
                    // fallback to style-loader in development
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "sass-loader",
                ],
            },
            {
                test: /\.ts(x)?$/,
                loader: 'ts-loader',
                exclude: /node_modules/
            },
            {
                test: /\.svg$/,
                use: 'file-loader'
            }
        ]
    },
    resolve: {
        extensions: [
            '.tsx',
            '.ts',
            '.js',
            '.scss'
        ]
    },
    optimization: {
        usedExports: true,
        runtimeChunk: false,
        minimize: false
    }
};

module.exports = config;

As shown in the above config, we store the compiled javascript in the variable with the name "testVar".

The above approach working fine when we are using the following command line code "webpack --mode production"

In the final generated javascript file we have a line which equals to testVar = webpack_exports;

Also, testVar.start is working fine.

But the above approach is not working when we are using the following command line "webpack serve --mode production" or "webpack serve" When we run a local server, the testVar.start is undefined. I am not sure what I am doing wrong.

Following is the code we are using in the index.html file to call the start function, which we defined in our internal javascript

    window.onload = function (){
    alert(testVar);
    console.log(testVar);
    if(testVar.start !== undefined)
    {
        alert(testVar.start);
        console.log(testVar.start);
        testVar.start(3,2);
    }
    else {

        alert("Start Function is undefined");
    }

}

Also following is the code insight from index.ts and math.ts.

    import {cube, square} from './math';

export function start(c:number, s:number) {
    console.log(cube(c));
    console.log(square(s));
}

export function square(x:number) {
    return x * x;
}
export function cube(x:number) {
    return x * x * x;
}

enter image description here

Answer 1

Finally, I got it working :-). I need to add the following line in my webpack.config.js

devServer: {
    injectClient: false
},

Following is the reference URL: https://github.com/webpack/webpack-dev-server/issues/2484

Don't forget to Vote it. Thanks.