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不是删除捆绑包，而是打字稿编译器。打字稿将会“消除”＆＃39;导入，因为它没有被使用，但是将导入语句从import MyComponent from './my-component';更改为import './my-component';强制打字稿包含它。

谢谢你@cartant！

在Webpack 3中禁用树抖动

1 个答案: