在Webpack 3中禁用樹抖動

Question

如何禁用Webpack 3中的樹抖動？

我正在嘗試在完全原生的Web組件中構建Web應用程序，我依靠克隆並使用innerHTML附加模板元素來呈現其中的任何子組件。 但是，由於webpack沒有看到我使用javascript中的子組件，因此它不會捆綁相應的文件，因此永遠不會定義Web組件。

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));
    }
}

如果我包含一個調用，比如let myComponent = new MyComponent(); ，我可以看到webpack最終捆綁導入，所以我相信這是因為組件是在模板字符串中定義的。

謝謝。

Answer 1

事實證明，它不是Webpack刪除捆綁包，而是打字稿編譯器。 由於未使用，因此Typescript將“刪除”導入，但是import MyComponent from './my-component';更改import MyComponent from './my-component';的import語句import MyComponent from './my-component'; import './my-component'; 強制打字稿包含它。

謝謝你@cartant！