Javascript Webpack4是树震动了引导，我怎样才能防止呢？

我正在尝试获得一个使用Jquery模式插件的遗留应用程序，该插件要求bootstrap的javascript在使用自定义网页配置的Angular 6和Webpack 4项目中工作。除了捆绑期间发生的树抖动正在删除我的

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",
})

谢谢您的时间。

在您的网页配置中尝试：

自动加载模块，而无需导入或要求 到处都是

例如：

// In webpack config
...
plugins: [
  new webpack.ProvidePlugin({
    bootstrap: 'bootstrap'
  })
]
...

.

在您的网页配置中尝试：

自动加载模块，而无需导入或要求 到处都是

例如：

// In webpack config
...
plugins: [
  new webpack.ProvidePlugin({
    bootstrap: 'bootstrap'
  })
]
...

---

.

我遇到了同样的问题，解决方案如下：

使用“需要”而不是“导入”。

改变这个

import*作为“引导”的引导；

对此

require("bootstrap");

---

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

我遇到了同样的问题，解决方案如下：

使用“需要”而不是“导入”。

改变这个

import*作为“引导”的引导；

对此

require("bootstrap");

---

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

在对这个问题进行了深入研究之后，我在其他导入中遇到了类似的问题，根本问题是我在不止一个地方引用了第三方库

换句话说，我在我的

main.ts

、我的

vendor.ts

和我的ProvidePlugin中导入JQuery、bootstrap和其他库。应用程序捆绑后，不同的引用会相互冲突，这会在我的应用程序中造成问题

我开始清理所有的参考资料，让它们都生活在一个地方，ProvidePlugin。然后，我还将runtimeChunk添加到我的Web包配置中

optimization: {
    runtimeChunk: "single"
}

---

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

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

换句话说，我在我的

main.ts

、我的

vendor.ts

和我的ProvidePlugin中导入JQuery、bootstrap和其他库。应用程序捆绑后，不同的引用会相互冲突，这会在我的应用程序中造成问题

我开始清理所有的参考资料，让它们都生活在一个地方，ProvidePlugin。然后，我还将runtimeChunk添加到我的Web包配置中

optimization: {
    runtimeChunk: "single"
}

---

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

从Bootstrap的4.5版开始，我认为更好的解决方案是明确说明您正在使用的插件，如下所述：

这样，您就不会加载完整的引导js，而是只加载您需要的东西。顺便说一句，如果您使用的是ProvidePlugin，则不需要将引导设置为全局，也不需要特殊的树震动配置

optimization: {
    runtimeChunk: "single"
}

另外，如果您仅使用jQuery进行引导，则无需为jQuery进行特殊配置

bootstrap/js/dist/util.js

已经从jquery导入$，所以webpack将处理导入

如果您希望使用而不是“jquery”，请创建一个别名，这样

import“jquery”

将解析为slim模块。事实上，我总是配置指向完整版本或精简版本的别名。我发现这样可以避免像两次意外导入jQuery这样的问题

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

---

从Bootstrap的4.5版开始，我认为更好的解决方案是明确说明您正在使用的插件，如下所述：

这样，您就不会加载完整的引导js，而是只加载您需要的东西。顺便说一句，如果您使用的是ProvidePlugin，则不需要将引导设置为全局，也不需要特殊的树震动配置

optimization: {
    runtimeChunk: "single"
}

另外，如果您仅使用jQuery进行引导，则无需为jQuery进行特殊配置

bootstrap/js/dist/util.js

已经从jquery导入$，所以webpack将处理导入

如果您希望使用而不是“jquery”，请创建一个别名，这样

import“jquery”

将解析为slim模块。事实上，我总是配置指向完整版本或精简版本的别名。我发现这样可以避免像两次意外导入jQuery这样的问题

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

---

我也尝试过，甚至尝试过提供中建议的特定引导模块。我也尝试过，甚至尝试过提供中建议的特定引导模块。查看下面的答案，了解如何使其与导入一起工作。我认为这实际上是webpack tr