Webpack 4是树抖掉的鞋带，我怎么才能防止呢？

Question

我正在尝试获得一个遗留应用程序，它使用Jquery模式插件，它需要引导程序的javascript在一个角6和Webpack 4项目中使用自定义Webpack配置。除了在捆绑过程中发生的树抖动正在删除我的vendor.ts文件中的引导导入之外，一切都正常工作，因为在我的应用程序中没有任何位置可以显式地使用引导导入。

这将导致我的引导模式和引导下拉列表中断。

注:如果我添加如下内容，则为：

import * as bootstrap from "bootstrap";
console.log(bootstrap);

对于我的main.ts文件，webpack没有删除引导程序，一切正常。

我已经尝试将多个条目添加到package.json sideEffects属性中，这是在文献资料中建议的，但我认为该属性用于标记应该删除的代码。是否有方法将导入的模块标记为而不是，以便从树抖动过程中删除？

我也尝试过这样的ProvidePlugin：

new ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    "window.jQuery": "jquery",
    _: "underscore",
    bootstrap: "bootstrap",
    moment: "moment",
    momenttimezone: "moment-timezone",
    // Collapse: "exports-loader?Collapse!bootstrap/js/dist/collapse",
    // Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
    Modal: "exports-loader?Modal!bootstrap/js/dist/modal",
})

耽误您时间，实在对不起。

Answer 1

我也有同样的问题，解决办法如下：

，而不是使用“导入”，而是使用“要求”.

改变这个

import * as bootstrap from "bootstrap";

到这个

require("bootstrap");

不幸的是，我还没有弄清楚，如何使它与“导入”一起工作。

Answer 2

在对这个问题做了更深入的研究之后，我得到了与其他导入类似的问题，根本问题是我在不止一个地方引用了第三方库。

换句话说，我在我的ProvidePlugin.、JQuery和vendor.ts中导入了JQuery、引导程序和其他库。一旦该应用程序被捆绑，不同的引用是相互冲突的，这给我的应用程序带来了问题。

首先，我清理了所有的引用，并让它们都生活在一个地方，即ProvidePlugin。然后，我还将runtimeChunk添加到我的webpack配置中。

optimization: {
    runtimeChunk: "single"
}

这确保了所有代码都引用相同的库。查看文档这里。我将把答案保留为@hostar，因为他确实解决了我最初的问题。

Answer 3

从4.5个版本的Bootstrap开始，我认为更好的解决方案是明确说明您正在使用的插件，如我们所解释的在文件中

import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/modal';

以这种方式，您不是加载完整的引导js，而是只加载您需要的。Afaik，如果您正在使用此ProvidePlugin，则不需要将引导设置为全局的，也不需要特殊的树抖动配置。

另外，如果您是专用，使用jQuery进行引导，则不需要为jQuery进行特殊配置。bootstrap/js/dist/util.js已经做了import $ "from jquery"，所以webpack将负责进口。

如果您喜欢使用jquery-slim而不是"jquery"，那么创建一个别名，这样import "jquery"就会被解析为瘦模块。实际上，我总是配置指向完整版本或苗条版本的别名。我发现这可以避免像进口jQuery这样的意外两次问题。

resolve: {
    alias: {
        // or "jquery/dist/jquery.js" for the full version
        jquery: 'jquery/dist/jquery.slim.js',
    }
},