在typescript Angular 2网页包项目中加载JavaScript库和css

我已经通过大量的努力建立了一个angular 2项目，其中webpack使用npm存储本地库。我的应用程序正在运行，但我不知道如何加载我的项目所需的jQuery、D3或bootstrap之类的东西

我曾经

npm安装jquery d3引导

etc在本地安装库，但将它们放在我的供应商文件中并没有多大作用，而且我无法从angular 2模板中的bootstrap访问d3对象或css标记

我的vendor.ts文件中有这些

import 'jquery';
import 'bootstrap-loader';

我也试过把

import * as d3 from 'd3/index';

在我的组件文件中，但仍然无法访问我的angular代码中的任何内容

所以基本上，问题是如何使用angular2和webpack将库加载到浏览器

编辑：我的加载程序->

       {
            test: /\.css$/,
            include: helpers.root('src', 'app'),
            loader: 'raw'
        },
        {
            test: /\.scss$/,
            loaders: ['style', 'css', 'postcss', 'sass']
        },
        {
            test: /\.(woff2?|ttf|eot|svg)$/,
            loader: 'url?limit=10000'
        },
        {
            test: /bootstrap\/dist\/js\/umd\//,
            loader: 'imports?jQuery=jquery'
        }

---

导入它们是正确的，唯一需要做的是引导字体的加载器和jquery的css加载器和插件。我已经做了一个基于jquery和bootstrap的angular2网页包seed，你可以看看它是如何工作的。在我的seed中，我有一个配置文件夹，其中包含所有网页包和配置。 您的问题是，当您使用webpack进行捆绑时，如何在浏览器中加载这些库。它应该将所有外部库也捆绑到捆绑包中，以便您可以在浏览器中访问这些库。您可以将webpack配置为生成不同的文件，例如vendor vendors.js文件、app app.js文件、css app.css文件和polly.js文件。有一个问题是，你正在导入引导加载程序，它不是你想要的引导程序吗

import "bootstrap/dist/css/bootstrap.css"

---

另外，请检查webpack是否抛出任何错误，例如它无法修复模块，或者由于您需要一个合适的加载程序而无法绑定。请告诉我您是否可以使用我的种子或答案解决问题。在我的供应商文件中，“导入”似乎没有任何作用。我包括了引导行，但我的标记仍然没有显示引导的任何更改。但供应商文件确实编译。该供应商文件是否包含在网页包中？是的，通过webpack.common.js->

module.exports={entry:{'polyfills'：'./assets/js/polyfills.ts'，'vendor'：'./assets/js/vendor.ts'，'app'：'./assets/js/main.ts'}，

您能看到webpack正在构建vendor.js文件，其中包含您的库吗？是的，当我构建时->

vendor-d97dacfa09f7bcd8dbd2.js 3.63 kB 3，1，2[emissed]vendor