在 Webpack 3 中禁用 tree-shaking

Question

如何在 Webpack 3 中禁用 tree-shaking？

我正在尝试在完全原生的 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 会 'elide' 导入，因为它没有被使用，但是将导入语句从 import MyComponent from './my-component'; 更改为 import './my-component'; 会强制 typescript 包含它。

谢谢@cartant！

在 Webpack 3 中禁用 tree-shaking

Disabling tree-shaking in Webpack 3

javascript

web-component

typescript

ecmascript-6

webpack