CODEWITHSUNDEEP
javascripttypescriptwebpackbundler
Clumpsypenguin
Clumpsypenguin

Reputation: 341

Webpack multiple entries to output 1 js library file

I want my 2 Typescript files (Print.ts, Quill.ts) in folder to be bundled in one Javascript (Brainsch.js) file output file.

Webpack.config.js

const path = require('path');

module.exports = (env, args) => ({
    resolve: { extensions: ['.ts', '.js', '.svg'] },
    devtool: args.mode === 'development' ? 'source-map' : 'none',
    module: {
        rules:
            [
                { test: /\.ts?$/, loader: 'ts-loader' },
                {
                    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                    loader: "url-loader",
                    options: { name: "fonts/[name]-[contenthash].[ext]", limit: 15000 },
                },
                {
                    test: /\.(jpe?g|png|gif|svg)$/i,
                    loader: "url-loader",
                    options: { name: "images/[name]-[contenthash].[ext]", limit: 15000 },
                }
            ]
    },
    entry: [path.resolve(__dirname, '..', 'Typescript/one.ts'), path.resolve(__dirname, '..', 'Typescript/two.ts')],
    output: {
        // Place output in wwwroot and export a top-level 'BrainschBulma' object
        path: path.join(__dirname, '..', 'wwwroot'),
        filename: 'BrainschBulma.js',
        library: {
            name: 'BrainschBulma',
            type: 'var',
            export: 'default'
        },
    }
});

one.ts


 export default class BrainschBulma{

    static PrintHTML(element) {
        var printContents = element.innerHTML;
       }
      ...
}

two.ts

import Quill from '../StaticAssets/node_modules/quill';

export default class BrainschBulma{

    static createQuill(quillElement, toolBar, readOnly, placeholder, theme, debugLevel) {
        var quill = new Quill(quillElement, {
            modules: {
                toolbar: toolBar,
            },
            placeholder: placeholder,
            readOnly: readOnly,
            theme: 'snow'
        });
    }

}

You will see that in both ts files the class same is the same. That is because i want to invoke this functions from the same class. Like so:

await JS.InvokeAsync<object>("BrainschBulma.createQuill", QuillElement, ToolBar, ReadOnly, Placeholder, Theme, DebugLevel);

It outputted this:

Object.defineProperty(exports, "__esModule", { value: true });
class BrainschBulma {
....
}

exports.default = BrainschBulma;

var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const quill_1 = __importDefault(__webpack_require__(/*! ../StaticAssets/node_modules/quill */ "./node_modules/quill/dist/quill.js"));
class BrainschBulma {
 ...
}
exports.default = BrainschBulma;

It still output the 2 same classes as 2 different entries. How can make it so that they apear in the same class in the output file.

I also tried an Entryfile where i import them both like so:

import  * as _PrintBrainsch  from '../Typescript/Print';
import * as _QuillBrainsch from '../Typescript/Quill';

export namespace BrainschBulma {
    export const PrintBrainsch = _PrintBrainsch;
    export const QuillBrainsch = _QuillBrainsch;
}

Upvotes: 0

Views: 807

Answers (1)

AKX
AKX

Reputation: 169388

You shouldn't export classes (especially classes of the same name) in One and Two.

If all you want, at the top level, is a plain JavaScript file that exports a BrainschBulma object with PrintHTML and createQuill (which seems to be what you want given that InvokeAsync call), then use the Webpack library configuration in your original post, set a single entry point entry.ts and:

one.ts

export function createQuill() { ...}

two.ts

export function PrintHTML() { ... }

entry.ts

import {createQuill} from "./one";
import {PrintHTML} from "./two";

export {createQuill, PrintHTML};

Upvotes: 1

Related Questions