how can i use ts-loader and webpack3 dynamic imports to implement code-splitting

[jackie19]

code:

class Home{

    append() {

        this.getComponent().then((component) => {
            document.body.appendChild(component);
        })
    }

    getComponent() {

        return import(/* webpackChunkName: "lodash" */ 'lodash/join').then(join => {

            let element = document.createElement('div');
            element.innerHTML = join(['Hello', 'webpack'], ' ');
            return element;
        })
    }
}

var myHome = new Home()

myHome.append()

webpack code-splitting guides: https://webpack.js.org/guides/code-splitting/

[johnnyreilly]

I advise taking a look at one of our execution tests that uses this approach: https://github.com/TypeStrong/ts-loader/tree/master/test/execution-tests/2.4.1_babel-importCodeSplitting

[landru29]

@johnnyreilly: the question was about using webpackChunkName in a typescriypt project

[johnnyreilly]

Oh well - that's simple. It should just work. Just make sure your tsconfig.json doesn't trim comments.

[Plmeks]

module: "esnext" and removeComments: false at tsconfig.json