Disabling tree-shaking in Webpack 3

Question

How would I disable tree-shaking in Webpack 3?

I am experimenting with building a web app in completely native Web Components, and I am relying on cloning and appending a template element with innerHTML to render any sub-components within it. However, since webpack doesn't see me using the sub-component within the javascript, it doesn't bundle the appropriate file, so the web component is never defined.

import MyComponent from './my-component';
let template = document.createElement('template');
template.innerHTML = `
<h1>My Web App</h1>
<my-component></my-component>
`;

export default class WebApp extends HTMLElement {
    constructor () {
        super();
        let shadowRoot = this.attachShadow({mode: 'open'});
        shadowRoot.appendChild(template.content.cloneNode(true));
    }
}

If I included a call like let myComponent = new MyComponent();, I can see webpack finally bundles the import, so I believe it's because the component is defined in the template string.

Thanks.

Answer 1

Turns out it wasn't Webpack removing the bundle, but the typescript compiler. Typescript would 'elide' the import since it wasn't being used, however changing the import statement from import MyComponent from './my-component'; to import './my-component'; forces typescript to include it.

Thanks you @cartant!